:root { /* 外観設定がない画面の既定値。後続の共通設定と同じ階層で継承する。 */ --elsa-button-default-bg: var(--elsa-border, #d2d2d2); --elsa-button-default-color: var(--elsa-text-muted, #667085); /* 入力欄・ラベルタブの枠線色（Issue #3797/差し戻し）。**以前は `.block.elsaFieldRow`だけがこの変数を定義していた**ため、SKUカードの 入力欄（`input.elsaText.elsaSkuValue`）のように`.elsaFieldRow`の外で `.elsaText`を使う画面は変数が届かず、各参照側の個別フォールバック （`#d2d2d2`など、Issue #3797より前の値）へ落ちて枠線色設定に追従 しなかった。ここ（:root）へ定義を上げ、`--elsa-border-color` （外観設定「枠線色」、既定#d4d4d4）をどこからでも参照できるようにする。 */ --elsa-field-control-border-color: var(--elsa-border-color, #d4d4d4); /*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ 会話の隙間の正本はこの3行だけである（Issue #4016のオーナー決定）。 会話の画面はエリアごとに隙間の値がばらばらだった（行6/10/6/14・ 会話欄18・吹き出しの中10/12・入力欄の三重の枠…）。値は**3つだけ**に し、**四辺とも同じ**にする。 外側の隙間 … 一覧の各行、参加者の並び、会話欄、入力欄の外側、 吹き出し同士の間隔 内側の隙間 … 吹き出しの中、入力欄の中 細かい隙間 … 並んだ印どうし、段どうし、文字と操作の間 `core/css/elsa_chat.css`はこの3つだけを読み、直値を書かない。 **利用者が選んだ値（`--elsa-…-spacing`）をここで受け止める。** `--elsa-field-control-border-color`と同じ形で、外観設定の変数を プログラム初期値のフォールバック付きで1回だけ読み、参照側は素の `var(--elsa-chat-gap-…)`だけを書く。外観設定の変数を参照側が直接 読むと、設定が届かない画面ごとに別の既定が散る。 **フォールバックの3つの数は`elsa_default_company_app_setting()`と 同じでなければならない。** 一致は `tests/appearance_variable_contract_test.php`（既定値の照合）と `tests/chat_gap_contract_test.php`が固定する。 ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/ --elsa-chat-gap-outer: var(--elsa-chat-outer-spacing, 10px); --elsa-chat-gap-inner: var(--elsa-chat-inner-spacing, 8px); --elsa-chat-gap-tight: var(--elsa-chat-tight-spacing, 6px); --elsa-tree-row-padding-inline: 6px; --elsa-tree-row-padding-block: 3px; /* 貼り付くタブの並びの重なり順（Issue #5210）。本文の部品（FILE の入れ替えボタンなど z-index 1〜3）より上、 本文から開く候補一覧（9 以上）・ボタンエリア（31）より下。段はここ 1 か所で決める。 */ --elsa-z-sticky-tab-list: 4; --elsa-scrollbar-size: 8px; --elsa-scrollbar-thumb: rgba(0, 0, 0, .16); --elsa-scrollbar-thumb-active: rgba(0, 0, 0, .38); --elsa-scrollbar-track: transparent; /* 文字・アイコン・印の上下中央（Issue #3852）。`core/js/elsa_ink_offset.js`が 読み込み時に実フォントの字面の偏りを測って上書きする。JSが動く前・測れな かったときは0emのまま（無補正＝flexの箱中央のまま）に倒す。 */ --elsa-ink-offset: 0em; /* 候補の種類のバッジ（`.elsaSelectorKindBadge`。Issue #4484・オーナー指示2026-10-07）。 バッジの決まりの「灰色の枠＝種類」の色はこの2行だけが持つ。形は「必須」 「試用中」の枠と同じで、色だけが違う（警告色の枠＝注意とは意味が別）。 外観設定の対象にしない（種類の見分けは会社ごとに変えない）。 */ --elsa-selector-kind-badge-border-color: #8a919c; --elsa-selector-kind-badge-color: #555555; /* 寸法。**文字の大きさは置き場所の文字の11/16**（既定の16pxで11px。表示設定で 文字を大きくすれば一緒に伸びる）。**最小幅は最長の「権限グループ」（6字）＋ 左右のpadding**（バッジ自身の文字基準。枠の2pxは使う側で足す）で、全種類の 幅をそろえて名前の頭を縦にそろえる。間隔もバッジ自身の文字基準。 */ --elsa-selector-kind-badge-font-scale: .6875; --elsa-selector-kind-badge-min-width: 6.7em; --elsa-selector-kind-badge-gap: .6em; } /*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ 文字・アイコン・印の上下中央、共通CSSの1か所（Issue #3852）。 **「箱の中央」と「字面の中央」は別物。** `display: flex; align-items: center;` は行の箱を中央へ置くだけで、フォントの字面（インク）はその箱の中でascent／ descentの比だけ上下へ偏る（メイリオは下の余白が大きい）。この偏りの実測値 （`--elsa-ink-offset`）を、文字を持つ要素へ`translateY`で1回だけ足して 字面そのものを中央へ寄せる。実測とCSSカスタムプロパティの仕組みは `core/js/elsa_ink_offset.js`の冒頭コメントを正本とする。 **使い方は`.elsaInkCenter`を1つ付けるだけ。** 部品側は種別（このクラス）を 宣言するだけで、個別の`vertical-align`・上下`padding`の書き分け・ `line-height`の調整をしない（画面ごとの個別調整は `tests/control_vertical_center_css_test.php`が禁止台帳で機械的に止める）。 **`text-box-trim`が使えるブラウザはCSS側の正式な仕組みへ委ねる。** `--elsa-ink-offset`は0emのまま（JS側が検知して上書きしない）にし、 `.elsaInkCenter`自身が`text-box-trim: trim-both`を宣言する。使えない ブラウザ（`@supports`が外れる環境。この原稿時点のLinux版Chromiumを含む） だけ`translateY`の実測補正を使う。どちらの経路でも結果は同じ位置になる ——「箱の中心 = 字面の中心」。 `display: inline-block`を添えるのは、`transform`がインライン要素の直接の 子孫（テキストノードそのもの）には効かないため。中身がテキストだけの 要素（``・``等）に付ける前提で、レイアウトの流れそのものは 変えない（`inline-block`は依然として文字の流れの中に収まる）。 ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/ .elsaInkCenter { display: inline-block; transform: translateY(var(--elsa-ink-offset, 0em)); } @supports (text-box-trim: trim-both) or (-webkit-text-box-trim: trim-both) { :root[data-elsa-text-box-trim] .elsaInkCenter { transform: none; text-box-trim: trim-both; text-box-edge: cap alphabetic; -webkit-text-box-trim: trim-both; -webkit-text-box-edge: cap alphabetic; } } /* アプリ内で送れる箱のスクロールバーはここだけが見た目を決める（Issue #3231）。 `overflow: auto`を持つCHAT・LIST・右ペイン・候補一覧などを部品ごとに列挙すると、 新しい送れる箱だけ太い既定表示へ戻る。全ての業務部品はclassを持つため、低詳細度の 共通規則を先に置き、実際にoverflowする箱だけブラウザが描く形にする。 色は標準の`scrollbar-color`だけが持つ。Chromiumで非標準thumbへ色を書くと標準色と その遷移を上書きするため、WebKit疑似要素は幅・透明な溝・角丸だけを担当する。 モバイルはブラウザ既定のoverlay scrollbarを維持する。 */ @media (min-width: 768px) { :where(html, body, [class]) { scrollbar-width: thin; scrollbar-color: var(--elsa-scrollbar-thumb) var(--elsa-scrollbar-track); transition: scrollbar-color .3s ease; } :where(html, body, [class])::-webkit-scrollbar { width: var(--elsa-scrollbar-size); height: var(--elsa-scrollbar-size); } :where(html, body, [class])::-webkit-scrollbar-track { background: var(--elsa-scrollbar-track); } :where(html, body, [class])::-webkit-scrollbar-thumb { border-radius: var(--elsa-scrollbar-size); } } @media (min-width: 768px) and (hover: hover) { :where(html, body, [class]):hover, :where(html, body, [class]):focus-within { scrollbar-color: var(--elsa-scrollbar-thumb-active) var(--elsa-scrollbar-track); } } * { box-sizing: border-box; } body { --elsa-block-action-height: calc(var(--elsa-button-font-size, 14px) * 2); /* **帯のボタンの図像と一覧の行の図像は同じ大きさ**（2026-09-03の利用者指示）。 以前は帯の共通アイコンが`1em`（14px）、行の操作が`28px * 0.6`（16.8px）、 行の種類アイコンが`1.1em`（15.4px）と3つばらばらだった。**操作面（28px）に 対する比で1つに決める**ので、外観設定の文字サイズを変えても3つは揃ったまま である（比の値はIcon Playgroundの実測。Issue #2002）。 */ --elsa-block-action-icon-size: calc(var(--elsa-block-action-height) * var(--elsa-block-action-icon-ratio, 0.60)); /* #3609: assets have no intrinsic margin; inset paint, never the icon box. */ --elsa-icon-padding: 1px; --elsa-icon-mask-size: calc(100% - 2 * var(--elsa-icon-padding)) calc(100% - 2 * var(--elsa-icon-padding)); /* **帯のボタン同士の隙間は1つの値で決める**（2026-09-03の利用者指摘）。以前は 行の隙間6px・まとまりの中4px・まとまりの境目20.8pxと3種類あり、同じ帯の中で ボタンの左右の空きが揃っていなかった。まとまりの境目は**この値の2倍＋区切り線** で作るので、「隙間の種類」は1つのままである。 */ --elsa-block-action-gap: 6px; /* 一覧のセルの中で、セルを埋めずに自分の枠を持つ部品（SWITCH）とマス目の線の間の余白 （Issue #4561）。操作列のセルの余白（3px）と同じく、帯の隙間の半分。 */ --elsa-list-cell-control-gap: calc(var(--elsa-block-action-gap) / 2); /* **タブ同士の隙間と、タブの並びの左端の余白は同じ1つの値**（2026-09-29のオーナー指摘）。 以前は一番左のタブの左端がペインの境界線に接していた。`core/css/elsa_tab.css`の `.elsaTabList`が`gap`と`padding-inline-start`の両方でこの値を読む。 */ --elsa-tab-gap: 2px; --elsa-list-search-max-width: 960px; /* Button artwork has one semantic source per icon. Every block consumes these tokens instead of owning a glyph, inline SVG, or block-local copy. */ --elsa-icon-apply: url("../php/blocks/icons/apply.svg"); --elsa-icon-arrow-down: url("../php/blocks/icons/arrow-down.svg"); --elsa-icon-arrow-left: url("../php/blocks/icons/arrow-left.svg"); --elsa-icon-arrow-right: url("../php/blocks/icons/arrow-right.svg"); --elsa-icon-arrow-up: url("../php/blocks/icons/arrow-up.svg"); --elsa-icon-attention: url("../php/blocks/icons/attention.svg"); --elsa-icon-ban: url("../php/blocks/icons/ban.svg"); --elsa-icon-close: url("../php/blocks/icons/close.svg"); --elsa-icon-confirm: url("../php/blocks/icons/confirm.svg"); --elsa-icon-copy: url("../php/blocks/icons/copy.svg"); --elsa-icon-correct: url("../php/blocks/icons/correct.svg"); --elsa-icon-delete: url("../php/blocks/icons/delete.svg"); --elsa-icon-document: url("../php/blocks/icons/document.svg"); --elsa-icon-document-plus: url("../php/blocks/icons/document-plus.svg"); --elsa-icon-download: url("../php/blocks/icons/download.svg"); --elsa-icon-edit: url("../php/blocks/icons/edit.svg"); --elsa-icon-enter: url("../php/blocks/icons/enter.svg"); --elsa-icon-filter: url("../php/blocks/icons/filter.svg"); --elsa-icon-folder: url("../php/blocks/icons/folder.svg"); --elsa-icon-folder-plus: url("../php/blocks/icons/folder-plus.svg"); --elsa-icon-group-plus: url("../php/blocks/icons/group-plus.svg"); --elsa-icon-help: url("../php/blocks/icons/help.svg"); --elsa-icon-list: url("../php/blocks/icons/list.svg"); --elsa-icon-menu: url("../php/blocks/icons/menu.svg"); --elsa-icon-more: url("../php/blocks/icons/more.svg"); --elsa-icon-move: url("../php/blocks/icons/move.svg"); --elsa-icon-notification: url("../php/blocks/icons/notification.svg"); --elsa-icon-notification-off: url("../php/blocks/icons/notification-off.svg"); --elsa-icon-paper-plane: url("../php/blocks/icons/paper-plane.svg"); --elsa-icon-person-plus: url("../php/blocks/icons/person-plus.svg"); --elsa-icon-plus: url("../php/blocks/icons/plus.svg"); --elsa-icon-print: url("../php/blocks/icons/print.svg"); --elsa-icon-resend: url("../php/blocks/icons/resend.svg"); --elsa-icon-reset: url("../php/blocks/icons/reset.svg"); --elsa-icon-revoke: url("../php/blocks/icons/revoke.svg"); --elsa-icon-run: url("../php/blocks/icons/run.svg"); --elsa-icon-save: url("../php/blocks/icons/save.svg"); --elsa-icon-server: url("../php/blocks/icons/server.svg"); --elsa-icon-settings: url("../php/blocks/icons/settings.svg"); --elsa-icon-triangle-down: url("../php/blocks/icons/triangle-down.svg"); --elsa-icon-triangle-up: url("../php/blocks/icons/triangle-up.svg"); --elsa-icon-view: url("../php/blocks/icons/view.svg"); --elsa-form-control-line-height: 2; --elsa-form-control-padding-block: 3px; --elsa-form-control-padding-inline: 8px; --elsa-form-control-border-width: 1px; --elsa-form-control-height: calc(2em + var(--elsa-form-control-padding-block) + var(--elsa-form-control-padding-block) + var(--elsa-form-control-border-width) + var(--elsa-form-control-border-width)); /* 2026-08-24〜25の間だけ、一覧の読み取り専用セルの列幅を``の`size`から 写した較正値（`--elsa-text-cell-char-advance` / `--elsa-text-cell-char-slack`）で 作っていた。**較正の下限がセルの上限を上回って隣の列へ重なった**ため撤去した （Issue #1918。経緯は`.elsaTextReadonly[data-list-field]`の注記）。読み取り専用の セルは実テキストなので、列幅は中身の実幅から決まる。較正値は要らない。 */ /*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ **ボタンのホバー色はここで決めない**（2026-09-02の利用者指示。Issue #2689） それまでこの2行が「ホバーの地＝メインメニュー色、字＝その上に載る色」と 決めていた。ホバー色が外観設定の項目になったので、値は`:root`から届く （`elsa_app_appearance_root_variables()`）。 **ここへ書き戻さない。** この宣言は`body`に載るため、`:root`から届いた 値を`body`の中の全要素に対して黙って覆い隠す。書き戻すと、外観設定で ホバー色を変えても**何も起きない**（値は届いているのに、より近い `body`の宣言が勝つ）。 参照側は`var(--elsa-primary-color, #24333f)`の 形で、値が届かない場面では従来どおりメインメニュー色へ倒れる。 ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/ /*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ **危険色はアプリ全体で1つである**（Issue #2689 段階3） 同じ「取り返しがつかない・失敗した」を示す色が `#b42318` `#c0392b` `#d92d20` の3値に割れていた。**外観設定の対象にはしない**——利用者が 地色を変えても、危険であることの見え方は動かさない（押せないボタンの 色を#2195で固定したのと同じ考え方である）。値はここ1か所が持つ。 接続状態の赤（`--elsa-connection-state-error`）は別物である。あちらは 「つながっていない」という状態の表示で、危険な操作の色ではない。 ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/ --elsa-danger-color: #b42318; /* 危険色の上に載る文字。地色が固定なので、こちらも固定である。 */ --elsa-danger-contrast: #ffffff; /*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ **印刷する文書の色は外観設定に従わない**（Issue #2689 段階3） 納品書・請求書・見積書・注文請書・ピッキングリストは、画面ではなく **紙に出るもの**である。利用者が画面の文字色を薄い灰にしたときに、 印刷した請求書まで薄い灰になっては困る。だから外観のトークンへは 寄せず、**印刷用の定数としてここ1か所に集める。** 集める理由は共通で、同じ「罫線」が`#444`と`#999`と`#222`に、同じ 「見出しの帯」が`#f0f0f0`と`#eee`に割れていたためである。値が1か所に あれば、帳票の見た目を揃えたいときに1行で揃う。 ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/ --elsa-document-paper: #ffffff; --elsa-document-ink: #222222; --elsa-document-ink-weak: #555555; --elsa-document-rule: #444444; --elsa-document-rule-weak: #999999; --elsa-document-band: #f0f0f0; --elsa-button-danger-hover-bg: var(--elsa-danger-color, #b42318); /* **「押せない（無効）」ボタンの見た目は、アプリ全体でこの2行だけが決める** （2026-08-28の利用者決定。Issue #2169の監査H5）。薄い灰の地に灰青の文字で、 地と文字の明暗差は約2.6:1。利用者が候補4段階から選んだ値である。 **画面ごとの上書きを置かないこと。** 2026-08-28まで無効の表現は2系統あった。 (1) Amazon出荷指示の丸ボタン 白文字 on #d2d2d2 ＝ 1.51:1（V2の写し） (2) 共通ボタンの`opacity: 0.6` 地の色しだいで実効の明暗差が変わる どちらも「読めるか」を約束できない。**半透明は下に何が来るかで見え方が 変わる**ため、地と文字を実色で決める方式へ寄せた。V2互換より読みやすさを 優先する判断も同日の利用者承認による。 **外観設定（システム標準→会社→本人）の対象にしない。** 会社や本人が ボタンの地色を変えても、「押せない」の見え方だけは全社共通で動かさない。 `core/php/function/app_appearance.php`の変数表にこの2つを足さないこと。 この2行が受け持つのは**ボタン（押して何かが起きる操作）**だけである。 次の3つは別の意味なので、同じ色にしない。 入力欄の無効 `--elsa-disabled-field-background-color`（外観設定で選べる） 処理中 `.elsaFileBlockRotate:disabled`のように`cursor: wait`で待たせる状態 選べない行 一覧の行の半透明（Issue #2169の監査H4。別課題） */ --elsa-button-disabled-bg: #eceef1; --elsa-button-disabled-color: #8a94a6; /* V2（elsa/css/reset.css）と同じ書体スタック。 */ font-family: "メイリオ", meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Verdana, Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, sans-serif; color: var(--elsa-content-text-color, #333333); margin: 0; padding: 0 0 0 210px; } /* V2（elsa/css/reset.css）と同じく、フォーム部品へ本文の書体を継承させる。 指定がないとブラウザ既定（Arial等）になり、同じフォーム上でTEXTと Selectorの書体が食い違う。V3では2026-08-05までこの状態だった。 文字サイズは各ブロックの指定を尊重するため、ここでは書体だけを揃える。 */ button, input, select, textarea { font-family: inherit; } #elsaLayout { max-width: none; margin: 0; padding: 30px; color: var(--elsa-content-text-color, #333333); font-size: var(--elsa-form-font-size, 16px); } /* 画面へ浮かせる操作（出荷指示の丸ボタンなど）の左右位置は、ウィンドウではなく **入力画面（左メニューを除いた領域）**を基準にする（2026-08-14の利用者指摘 「丸ボタンですが左メニューも含めた左右中央になっています」）。 左メニューの実幅をこの変数だけが持ち、開閉・レスポンシブで変わっても 同じ式のまま追従する。`position: fixed`はウィンドウ基準なので、 中央は `50% + 左メニュー幅 / 2` になる。**V2も同じ式だった** （`left: calc(50% - 70px + 110px)`。70pxはボタン群の半幅、110pxは 左メニュー200pxの半分ぶんの寄せ）。 */ :root { --elsa-content-left: 0px; } body.elsaHasNavigation { --elsa-content-left: 210px; display: grid; grid-template-columns: 210px minmax(0, 1fr); /* 2行目はバージョン刻印のフッター用。`auto`なので、フッターが無い ページでは高さ0のまま何も起きない。**`1fr auto`にすることで、 本文が短いページでも余った高さを1行目が吸い、フッターのぶんだけ ページが100vhを超えてスクロールバーが出る、という事故を避ける。** */ grid-template-rows: 1fr auto; align-items: stretch; min-height: 100vh; min-height: 100dvh; padding-left: 0; } /* 左メニューは2行ぶんを覆う。明示しないと自動配置で1行目だけに入り、 自分の`min-height: 100vh`で行からはみ出す。 */ body.elsaHasNavigation > #elsaNav { grid-row: 1 / -1; grid-column: 1; } body.elsaHasNavigation #elsaLayout { grid-row: 1; grid-column: 2; width: 100%; min-width: 0; } body.elsaHasNavigation > .elsaAppFooter { grid-row: 2; grid-column: 2; } /* メインカラム最下部のバージョン刻印（2026-08-15の利用者指示 「利用者が気にならないようにしてください」）。 **本文ではなく刻印なので、フォーム文字サイズには追従させない。** 表示設定でフォームを24pxにしたときに一緒に大きくなると、目立たせない という目的に反する。色だけは共通の淡色トークンから取り、背景が変わっても 読める側へ寄せる。左右のpaddingは`#elsaLayout`と同じ値にして、本文の 左右端と刻印の端が揃うようにしてある。 右寄せにするのは、視線の通り道である左端から外すためである。 */ .elsaAppFooter { padding: 0 30px 12px; color: var(--elsa-text-muted, #667085); text-align: right; } /* 著作権表記とバージョン刻印は**同じ見た目で、隙間なく2行**にする （2026-08-15の利用者指示）。どちらもブロックにして`margin: 0`を明示する。 インラインのままだと行の箱と文字の箱がずれ、「密着している」ことを 実寸で確かめられない。 **寄せ方だけが違う。** 著作権はメインカラムの水平中央、バージョンは フッターの寄せ（PC幅は右、スマホ幅は左）をそのまま継ぐ。 */ .elsaAppFooterCopyright, .elsaAppFooterVersion { display: block; margin: 0; font-size: 11px; line-height: 1.4; opacity: 0.65; } .elsaAppFooterCopyright { text-align: center; } .elsaPageTitleBlock { display: block; } .elsaBreadcrumb { font-size: var(--elsa-breadcrumb-font-size, 32px); } .elsaBreadcrumb > ol { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 20px 0 0; padding: 0; list-style: none; } .elsaBreadcrumb li { display: inline-flex; align-items: baseline; min-width: 0; } /* 階層と階層のあいだの矢印。2026-08-29の利用者指示「右矢印が＞になっています。 **共通アイコンのarrow-right.svgにできますか？**」。 文字の`›`をやめ、共通アイコンの意味トークン（`--elsa-icon-arrow-right`）をmaskで 敷く。**同じ意味の図像を文字とSVGで二重に持たない**（`docs/development-policy.md` 「5. UI品質」）。大きさは`em`なので、見出しの文字サイズを変えても矢印が一緒に 伸縮する。読み上げには要らない（道筋は前後の文字が示す）。 */ .elsaBreadcrumb li + li::before { flex: 0 0 auto; align-self: center; width: .42em; height: .42em; margin-right: 6px; background: var(--elsa-border, #d2d2d2); content: ""; -webkit-mask: var(--elsa-icon-arrow-right) var(--elsa-icon-arrow-right-mask-position, center) / var(--elsa-icon-arrow-right-mask-size, var(--elsa-icon-mask-size)) no-repeat; mask: var(--elsa-icon-arrow-right) var(--elsa-icon-arrow-right-mask-position, center) / var(--elsa-icon-arrow-right-mask-size, var(--elsa-icon-mask-size)) no-repeat; } .elsaBreadcrumbAncestor { color: var(--elsa-text-muted, #667085); } .elsaBreadcrumbCurrent { max-width: 100%; flex-wrap: wrap; column-gap: .2em; } .elsaBreadcrumb .elsaPageTitle { font-size: inherit; } .elsaPageTitle { margin: 0; overflow-wrap: anywhere; } .elsaDeveloperPageBadge { color: var(--elsa-button-danger-hover-bg, #b42318); font-weight: 700; white-space: nowrap; } .elsaLineBlock { /* 見出しの罫は強調色に従う（旧い固定の青は外観設定に追随しなかった）。 */ --elsa-line-color: var(--elsa-primary-color, #24333f); --elsa-line-width: 4px; --elsa-line-surface-color: var(--elsa-heading-background-color, #f5f7f9); --elsa-line-title-color: var(--elsa-heading-text-color, #333333); --elsa-line-title-size: var(--elsa-heading-text-size, 16px); --elsa-line-title-weight: 700; --elsa-line-padding-block: 8px; --elsa-line-padding-inline: 12px; display: block; box-sizing: border-box; width: 100%; min-width: 0; padding-top: calc(var(--elsa-line-top-addend, var(--elsa-block-spacing, 8px)) + var(--elsa-line-top-spacing, 8px)); padding-bottom: var(--elsa-line-bottom-spacing, 0px); } .elsaLineTitle { min-width: 0; margin: 0; padding: var(--elsa-line-padding-block) var(--elsa-line-padding-inline); border-inline-start: var(--elsa-line-width) solid var(--elsa-line-color); background: var(--elsa-line-surface-color); color: var(--elsa-line-title-color); font-size: var(--elsa-line-title-size); font-weight: var(--elsa-line-title-weight); line-height: 1.5; overflow-wrap: anywhere; } .block.elsaLineRow { display: block; width: 100%; padding-top: 0; } /* 区画まるごと使えないときの見出しの「!」（Issue #5141）。見出しの罫と面を包み（`.elsaLineHead`）へ 移し、見出しの文字と「!」を同じ1本の帯に並べる。「!」の升・図像・色は入力欄の「!」と同じ規則。 */ .elsaLineBlock--alert .elsaLineHead { display: flex; align-items: center; min-width: 0; padding-inline-end: 6px; border-inline-start: var(--elsa-line-width) solid var(--elsa-line-color); background: var(--elsa-line-surface-color); } .elsaLineBlock--alert .elsaLineHead > .elsaLineTitle { flex: 1 1 auto; border-inline-start: 0; background: transparent; } /* 区画の見出しの「!」は、ボタン自身の種別（data-field-alert-kind="section"）で見た目を変える（外の祖先から装飾しない）。 */ .elsaFieldHeaderAction.elsaFieldAlertButton[data-field-alert-kind="section"] { border-left: 0; background: transparent; } /* 折りたたみの見出し（Issue #4345、オーナー決定2026-10-03）。 `option.collapsible.controls`を渡した呼び出しだけ、見出しの文字が開閉の ボタンになる（`core/php/blocks/line/line.php`）。**見出しの見た目は変えない** ——面・罫・文字色・字の大きさは`.elsaLineTitle`が持ったままで、このボタンは 背景も枠も持たず、font・colorを継承するだけの透明な当たり判定である。 見出しを2つの部品（文字＋開閉ボタン）へ割らずに1つに保つため、開閉の印は `::after`のマスクで描く（DOMへ飾りの節点を足さない契約は `tests/line_block_test.php`が持つ）。矢印は左メニューの枝 （`.elsaNavBranchToggle::after`）と同じ共通のarrow-rightを回して使い、 専用の図像を増やさない。 */ .elsaLineTitleToggle { display: flex; box-sizing: border-box; align-items: center; gap: 6px; width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; } .elsaLineTitleToggle::after { box-sizing: border-box; flex: 0 0 auto; width: 1em; height: 1em; margin-left: auto; background: currentColor; content: ""; -webkit-mask: var(--elsa-icon-arrow-right) var(--elsa-icon-arrow-right-mask-position, center) / var(--elsa-icon-arrow-right-mask-size, var(--elsa-icon-mask-size)) no-repeat; mask: var(--elsa-icon-arrow-right) var(--elsa-icon-arrow-right-mask-position, center) / var(--elsa-icon-arrow-right-mask-size, var(--elsa-icon-mask-size)) no-repeat; transform: rotate(90deg); transition: transform 0.15s ease; } .elsaLineTitleToggle[aria-expanded="false"]::after { transform: rotate(0deg); } @media (prefers-reduced-motion: reduce) { .elsaLineTitleToggle::after { transition: none; } } /* サポート › 使い方の区分の中身（Issue #4345）。開閉のために表を1枚だけ包む 画面側のwrapperで、閉じた状態は`hidden`属性そのもの（画面側で表示・非表示の CSSを足さない）。 **包むと、表が上の隙間を受け取れなくなる**（1014行目の`* + .elsaListContainer`は DOMの兄弟を見るため、包みの中で先頭の子になった表には先行の兄弟が無い）。 表のルート（`.elsaListContainer`）を外の祖先セレクタから装飾するのは 禁じられている（`tests/field_block_style_test.php`）ので、**包み自身**が 同じ共通トークンで同じ大きさの上の隙間を持つ。 */ .elsaGuideGroupBody { padding-top: var(--elsa-block-spacing, 8px); } /* LINEが自分のコンテナ（タブパネル・ペイン・POPUP本文・フォームなど）の 先頭要素であるときは、LINE自身の上部隙間を0にする。コンテナ自身の paddingと`--elsa-line-top-spacing`が二重に積み重なって不揃いな隙間に なるのを防ぐ（Issue #3702。fleetのタブパネルpadding16px + LINE既定 25pxで観測）。**下側の隙間・線・見出し・背景は変えない。タブパネル 自身のpaddingも別途の判断待ちのためここでは変えない。** LINEは経路によってDOM構造が2通りある。 1. フィールド行として描く経路（`core/php/function/field_draw.php`）は `div.block.edit.elsaLineRow`でsectionを包む。sectionはその行の 唯一の子なので、section自身への`:first-child`は常に真になり 判定にならない。**判定すべきは行（.elsaLineRow）自身がコンテナの 先頭かどうか。**行は`field_draw.php`が全フィールド共通で描く 外部のラッパーであり、LINE専用ではない。そのため行を祖先にして LINEのルート（`.elsaLineBlock`）を直接装飾する書き方は取らない （`tests/field_block_style_test.php`「外部の祖先セレクタから ブロックのルートを装飾しない」が禁じる。ブロックのルートを 動かしてよいのはブロック自身の規則だけである）。代わりに行は 自分自身（`.elsaLineRow:first-child`が主語）が持つトークン `--elsa-line-top-spacing`を0へ上書きするだけにとどめ、実際の `padding-top`はLINE自身の規則（上の`.elsaLineBlock`）がそのトークンを 読んで決める。カスタムプロパティは通常のCSSプロパティと違い祖先から 子孫へ継承されるため、行より内側の`.elsaLineBlock`だけへ値が届く。 2. `elsa_block_draw()`を直接呼ぶ経路（POPUP本文の区切りなど）は 包む要素を持たない。sectionが直接コンテナへ並ぶので、素の `:first-child`がそのままコンテナの先頭かを表し、`.elsaLineBlock` 自身の規則としてそのまま`padding-top`を0にしてよい。 2番目の規則が1番目の対象（行に包まれたsection）まで拾わないよう、 親が`.elsaLineRow`でないことを`:not()`で明示する。 `:first-child`は「コンテナの先頭**要素**」であって「先頭の`.block`」 ではない。フォーム描画（`elsa_app_setting_use_inputs_html`・ `company_appearance_editor.php`の`action`・`server_id`・`cmid`・ `csrf_token`）は`.elsaAppSettingForm`の中でCSRF・modeの`` を`.block`より先に複数個並べて出す。この``群は不可視だが実在の 要素なので、LINEが実質フォーム内で最初の行でも`:first-child`は真に ならず、隙間が残っていた（Issue #3702フォローアップ。fleetの テナント外観設定 `/fleet/?selection=tenant-action:*:*:appearance` の 「共通カラー設定」で実機確認、`.elsaLineRow`が`.elsaAppSettingForm`の 先頭要素ではなくpadding-top 25pxのまま）。`:nth-child(1 of .block)` （CSS Selectors Level 4、現行のChromium・Firefox・Safariで対応済み。 本ファイルは`:has()`など同水準の機能を既に使っている）は「`.block`と 一致する最初の子」を表すため、不可視な``等の 非`.block`要素に先行されても正しく先頭と判定する。`:first-child`規則は `:nth-child(of)`未対応の古いブラウザ向けの後方互換として残す （対応ブラウザではより限定的な`:nth-child(1 of .block)`が同じ宣言を 上書きし、結果は変わらない）。 **2026-09-26追記（#4097、実測して直した）**: 共通ALERT （`core/php/blocks/alert/alert.php`が描く`.elsaPageMessage.elsaAlertBlock`） の直後にLINEが来る画面（例: `/users/?mode=insert`の設定統合窓。 ここではCONTROLLERが右のペインへ移り、LINEが`$params["fields"]`の 先頭になる）で、ALERTとLINEの間の隙間が消えていた。原因は `:nth-child(1 of .block)`の絞り込み対象（`of`の後ろ）がALERTを 含めておらず、ALERTのdiv自身に`.block`クラスが無いため数に入らない ことだった——ALERTが視覚的に直前にあっても、LINEは自分の兄弟の中で 「`.block`に一致する最初の要素」のままで、コンテナの先頭と誤認して いた（Computed Styleで`padding-top: 0px`を確認）。 **直しは「ALERTの直後」だけを隣接兄弟セレクタで名指しし、LINE自身の トークンを親から受け継ぐ値へ戻すだけ**（`inherit`。外観設定の値は`:root`に あるのでそれを受け継ぎ、設定が無ければ`padding-top: var(--elsa-line-top-spacing, 8px)` 側のフォールバックへ落ちる——値を直書きしない。2026-10-05、Issue #4388で `initial`から改めた。`initial`は外観設定の値まで捨てて既定の8pxへ戻していた。LINE自身のpadding-topが 上部隙間の唯一の持ち主、という#3489の決定はそのまま）。**詳細度は `.block`を重ねて合わせる**——`:nth-child(1 of S)`は疑似クラス分だけで なく`S`（ここでは`.block`）の詳細度も足すため、`.elsaLineRow:nth-child(1 of .block)`は実は(0,3,0)で、素の`.elsaAlertBlock + .elsaLineRow` (0,2,0)では勝てない（実測でFAILし気づいた）。`.elsaAlertBlock + .block.elsaLineRow`まで揃えて(0,3,0)の同点にし、ファイルの後ろに 置くことで勝たせる（既存の詳細度合わせと同じ作法）。`of`リストへ `.elsaAlertBlock`をカンマで足す案は`tests/field_block_style_test.php`の 祖先セレクタ検査がカッコ内のカンマをセレクタ区切りと誤認し、 「外部の祖先セレクタでブロックのルートを装飾している」と誤検知した ため採らない。ALERTが無い画面や、LINEが本当にコンテナの先頭である POPUP断片・見出し単体では、直前の兄弟がALERTではないためこの規則は 発火せず、上部隙間は従来どおり0のままになる。 **2026-09-27追記（オーナー決定、Issue #4113）**: 上の#3489の決定 「見出しの上の距離は`--elsa-line-top-spacing`だけが決める」は、途中 （コンテナの先頭ではない）LINEについて改めた。見出しの前後にある内容と 同じ「欄同士の間隔」（`--elsa-block-spacing`）を挟まないのは不自然に 詰まって見えるという実画面での指摘（外観設定）による。 * **コンテナの先頭のLINE**（上のIssue #3702・#4097の各規則が対象） … 変わらず0。ペインやコンテナ自身のpaddingだけが隙間を持つ。 * **途中のLINE**（直前に実在のブロックがある） … 「ブロック同士の 間隔」＋「見出しの上部隙間」の**足し算**。以前は上部隙間だけだった。 持ち主を1つに保つ設計自体は変えず、`.elsaLineBlock`が読む入力を 2本（`--elsa-line-top-addend`・`--elsa-line-top-spacing`）に分けて `calc()`で足す。`--elsa-line-top-addend`は不指定なら `var(--elsa-block-spacing, 8px)`へ落ちる——**「途中」が既定**で、 「先頭」の側だけがこの節の各規則で両トークンを0（または`initial`で フォールバックへ戻す）にする。先頭側の規則を1つ増やし忘れると 「先頭にも足す」という退行になるため、0にする代入は必ずペアで書く （`tests/spacing_audit_browser_test.js`の変異2種がこの両方を検査する）。 **単位無しの`0`は書かない。** `calc()`の足し算に混ぜるカスタム プロパティは、代入した字面がそのままトークンとして展開される。単位無しの `0`は``として展開され、``（`px`側の項）との加算は 型不一致で`calc()`全体が無効になり、`padding-top`は（非継承プロパティの 既定である）0へ落ちる——**結果だけ見ると偶然0pxで正しく見えるため、 「先頭にも足す」変異が検知できなくなる**（実際に2026-09-27の実装中に この形で気づかず一度リグレッションを作った）。`0px`と書けば ``として展開され、算術が正しく成立する。 */ .elsaLineRow:first-child { --elsa-line-top-spacing: 0px; --elsa-line-top-addend: 0px; } .elsaLineRow:nth-child(1 of .block) { --elsa-line-top-spacing: 0px; --elsa-line-top-addend: 0px; } .elsaAlertBlock + .block.elsaLineRow { --elsa-line-top-spacing: inherit; --elsa-line-top-addend: inherit; } /* **2026-10-05追記（Issue #4388）**: 画面が欄をまとめるために置く透明な包み （`[data-elsa-field-group]`、下の「種類で切り替わる欄の包み」と同じ目印）の 先頭にLINEがあり、包みの手前に見えている内容があるとき、そのLINEは見た目の うえでは「途中のLINE」である。包みは器（padding）を持たないので、先頭の0へ 落とすと直前の欄へ密着する（設定 › AI「使用するAI」の各AIの見出しで実測）。 この場合だけ先頭扱いから外し、途中のLINEと同じ足し算（ブロック同士の間隔＋ 見出しの上部隙間）へ戻す。値は直書きせず、トークンを親から受け継ぐ値へ戻すか （行として描く経路）、先頭の0の規則から外す（裸の見出し）だけにする。 左辺は欄の包みの規則（`[data-elsa-field-group] > .elsaFieldRow`）と同じで、 見えない要素（`[hidden]`・空・隠し入力）を手前の内容と数えない。 */ :where(:not(.elsaController):not(input[type="hidden"]):not([hidden]):not(script):not(template):not(:empty)) ~ [data-elsa-field-group] > .elsaLineRow:nth-child(1 of .block) { --elsa-line-top-spacing: inherit; --elsa-line-top-addend: inherit; } .elsaLineBlock:first-child:not(.elsaLineRow > .elsaLineBlock):not(:where(:not(.elsaController):not(input[type="hidden"]):not([hidden]):not(script):not(template):not(:empty)) ~ [data-elsa-field-group] > .elsaLineBlock) { padding-top: 0; } .elsaHistoryTitle { margin: .83em 0; font-size: 1.5em; } .elsaHistoryItems { display: grid; gap: 8px; } .elsaHistoryItem { overflow: hidden; border: 1px solid var(--elsa-border, #d2d2d2); border-radius: 4px; background: var(--elsa-surface, #ffffff); } .elsaHistorySummary { display: flex; flex-wrap: wrap; align-items: center; min-height: var(--elsa-form-control-height); padding: var(--elsa-form-control-padding-block) var(--elsa-form-control-padding-inline); gap: 4px 12px; cursor: pointer; line-height: var(--elsa-form-control-line-height); } .elsaHistorySummary:hover, .elsaHistorySummary:focus-visible { background: var(--elsa-surface-sunken, #f5f7f9); } .elsaHistoryTimestamp { font-variant-numeric: tabular-nums; } .elsaHistoryEvent { font-weight: 600; } .elsaHistoryActor, .elsaHistoryOverview { color: var(--elsa-text-muted, #667085); } .elsaHistoryDetail { max-height: 420px; margin: 0; padding: 12px; overflow: auto; border-top: 1px solid var(--elsa-border, #d2d2d2); background: var(--elsa-surface-sunken, #f5f7f9); color: inherit; font: 0.875em/1.6 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; white-space: pre-wrap; overflow-wrap: anywhere; } .elsaHistoryEmpty { margin: 0; padding: 12px; border: 1px solid var(--elsa-border, #d2d2d2); border-radius: 4px; background: var(--elsa-surface-sunken, #f5f7f9); } .elsaCapacityBlock { width: 100%; } .elsaCapacityGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 320px)); justify-content: start; gap: var(--elsa-block-spacing, 8px); } .elsaCapacityCard { position: relative; min-height: 132px; overflow: hidden; border: 1px solid var(--elsa-border, #d2d2d2); border-radius: 5px; background: var(--elsa-surface, #ffffff); } .elsaCapacityCardFill { position: absolute; inset: 0 auto 0 0; display: block; height: 100%; background: var(--elsa-primary-color, #24333f); transition: width .2s ease; } .elsaCapacityCardContent { position: relative; z-index: 1; display: grid; align-content: space-between; gap: 8px; min-height: 130px; padding: 10px; color: var(--elsa-content-text-color, #333333); text-shadow: 0 0 3px var(--elsa-surface, #ffffff), 0 0 3px var(--elsa-surface, #ffffff); } .elsaCapacityCardTitle { margin: 0; font-size: 1em; } .elsaCapacityCardValue { align-self: center; margin: 0; font-size: 1.1em; font-weight: 600; font-variant-numeric: tabular-nums; text-align: center; } .elsaCapacityCardNote { align-self: end; margin: 0; color: var(--elsa-text-muted, #667085); font-size: .8em; line-height: 1.2; text-align: right; } .elsaCapacityTrack { position: relative; width: 100%; height: 50px; overflow: hidden; border-radius: 4px; background: var(--elsa-button-default-bg, #d2d2d2); } .elsaCapacityFill { position: absolute; inset: 0 auto 0 0; display: block; height: 100%; background: var(--elsa-primary-color, #24333f); transition: width .2s ease; } .elsaCapacityContent { position: absolute; inset: 0; z-index: 1; color: var(--elsa-content-text-color, #333333); pointer-events: none; text-shadow: 0 0 3px var(--elsa-surface, #ffffff), 0 0 3px var(--elsa-surface, #ffffff); } .elsaCapacityValue { position: absolute; inset: 4px 8px auto; margin: 0; font-size: inherit; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.35; text-align: center; } .elsaCapacityNote { position: absolute; right: 6px; bottom: 3px; max-width: calc(100% - 12px); margin: 0; font-size: .8em; line-height: 1.2; text-align: right; } .elsaCapacityUnavailable { margin: 0; padding: 12px; border: 1px solid var(--elsa-border, #d2d2d2); border-radius: 4px; background: var(--elsa-surface-sunken, #f5f7f9); } /* STATUS CARD（Issue #3728 決定60）。「状態だけを表示するカード」で、 CAPACITYのカード（`.elsaCapacityCard`）と同じ大きさ・同じ見た目の枠 （min-height 132px、枠線、角丸、padding、内側のgrid gap）を共有する。 進捗バー（`elsaCapacityCardFill`相当）は持たない——比率ではなく 状態1語だからである。説明文は持たず、値と最終確認時刻の2段だけ。 隙間（先行・後続ブロックとの間隔）は下の「ブロック間の隙間」節が CAPACITYと同じ規則でまとめて持つ。 */ .elsaStatusCardBlock { width: 100%; } .elsaStatusCard { position: relative; min-height: 132px; max-width: 320px; overflow: hidden; border: 1px solid var(--elsa-border, #d2d2d2); border-radius: 5px; background: var(--elsa-surface, #ffffff); } .elsaStatusCardContent { display: grid; align-content: space-between; gap: 8px; min-height: 130px; padding: 10px; color: var(--elsa-content-text-color, #333333); } .elsaStatusCardTitle { margin: 0; font-size: 1em; } .elsaStatusCardValue { align-self: center; margin: 0; font-size: 1.1em; font-weight: 600; text-align: center; } .elsaStatusCard.is-warning .elsaStatusCardValue { color: var(--elsa-semantic-caution-color, #dc6803); } .elsaStatusCard.is-unavailable .elsaStatusCardValue { color: var(--elsa-text-muted, #667085); } .elsaStatusCardDetail { align-self: end; margin: 0; color: var(--elsa-text-muted, #667085); font-size: .8em; line-height: 1.2; text-align: right; } .elsaDashboardCardsBlock { width: 100%; min-width: 0; } .elsaDashboardCardsGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--elsa-block-spacing, 8px); align-items: stretch; } .elsaDashboardCard { display: grid; grid-template-rows: auto minmax(0, 1fr); width: 100%; min-width: 0; height: 30em; overflow: hidden; border: 1px solid var(--elsa-border, #d2d2d2); border-radius: 5px; background: var(--elsa-surface, #ffffff); color: var(--elsa-content-text-color, #333333); } .elsaDashboardCardHeader { display: flex; align-items: center; justify-content: space-between; gap: .75em; min-width: 0; min-height: 2.75em; padding: .625em; border-bottom: 1px solid var(--elsa-border, #d2d2d2); background: var(--elsa-button-default-bg, #d2d2d2); } .elsaDashboardCardHeader h2 { min-width: 0; margin: 0; font-size: 1em; line-height: 1.35; overflow-wrap: anywhere; } .elsaDashboardCardAction { flex: 0 0 auto; font-weight: 600; line-height: 1.35; } .elsaDashboardCardAction:focus-visible { outline: 2px solid var(--elsa-primary-color, #24333f); outline-offset: 2px; } .elsaDashboardCardBody { min-width: 0; min-height: 0; padding: .625em; overflow: auto; overflow-wrap: anywhere; } .elsaDashboardCardBody > [data-block-type] { min-width: 0; } /* `option["compact"]`の見た目。既定の`.elsaDashboardCard`は`height: 30em`固定で トップの大きな枠を想定しており、数字1行＋補足1行のKPIには高すぎる。高さを 内容に任せ、横は4枚並ぶようにし、中身は縦に積む。 **この4規則は2026-08-29まで`core/css/elsa_rental_billing_workspace.css`の中に しかなく、請求・入金の画面でしか読まれなかった。** ブロックのオプションの 見た目を画面固有CSSが持つと、2つ目の画面が同じ`compact`を指定しても効かない （入居者ハブで実際にそうなった）。規則そのものは1つも増やさず、置き場だけを ブロックの側へ移してある（`docs/architecture.md`「外部の祖先セレクタから 子ブロックを装飾しない」と同じ趣旨）。 */ .elsaDashboardCardsBlock--compact .elsaDashboardCardsGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .elsaDashboardCardsBlock--compact .elsaDashboardCard { height: auto; } .elsaDashboardCardsBlock--compact .elsaDashboardCardBody { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; } @media (max-width: 900px) { .elsaDashboardCardsBlock--compact .elsaDashboardCardsGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .elsaDashboardCardsGrid { grid-template-columns: minmax(0, 1fr); } } /* CHARTブロック（Issue #3493）。375pxへの縮小は`viewBox`だけで行い、 CSSは横幅いっぱいへ伸縮させるだけである（メディアクエリを持たない）。 段の色はブロック側で`var(--...)`だけを塗るので、ここでは固定色を 1つも書かない。凡例スウォッチだけは、ブロックが渡した`--...`を インラインstyleへそのまま乗せる（CSS側は正方形の形だけを持つ）。 */ .elsaChartBlock { display: block; width: 100%; min-width: 0; margin: 0; } .elsaChartBlock[hidden] { display: none; } .elsaChartSvg { display: block; width: 100%; height: auto; } .elsaChartBaseline { stroke: var(--elsa-border, #d2d2d2); stroke-width: 1; } .elsaChartReferenceLine { stroke: var(--elsa-button-disabled-color); stroke-width: 1; stroke-dasharray: 4 3; } .elsaChartReferenceLabel { font-size: 9px; fill: var(--elsa-button-disabled-color); } .elsaChartAxisLabel { font-size: 9px; fill: var(--elsa-content-text-color, #333333); } .elsaChartBarSegment:focus-visible { outline: 2px solid var(--elsa-primary-color, #24333f); outline-offset: 1px; } .elsaChartLegend { display: flex; flex-wrap: wrap; gap: .75em; margin: .5em 0 0; padding: 0; list-style: none; } .elsaChartLegendItem { display: inline-flex; align-items: center; gap: .4em; font-size: .9em; } .elsaChartLegendSwatch { display: inline-block; width: .9em; height: .9em; border-radius: 2px; } #elsaNav { display: flex; position: relative; width: 210px; min-height: 100vh; min-height: 100dvh; flex-direction: column; align-items: stretch; gap: 0; padding: 0; background: var(--elsa-primary-color, #24333f); color: var(--elsa-primary-contrast, #fff); font-size: var(--elsa-tree-font-size, 16px); overflow: visible; box-shadow: none; } .elsaNavBrand { display: flex; align-items: center; justify-content: center; width: 210px; height: 210px; padding: 0; color: var(--elsa-primary-contrast, #fff); font-size: 1.1em; font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--elsa-menu-border-color, #fff); } .elsaNavBrand img, .elsaNavBrand .elsaBrandWordmark { display: block; width: auto; height: auto; max-width: 210px; max-height: 210px; object-fit: contain; object-position: center; } .elsaNavDesktopBrand { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .elsaNavMobileBrand { display: none; } .elsaMobileBrand { min-width: 0; align-items: center; justify-content: center; } .elsaMobileBrandImage { display: block; object-fit: contain; } .elsaBrandWordmark { color: inherit; } .elsaMobileBrandText { display: block; max-width: 100%; overflow: hidden; color: var(--elsa-content-text-color, #333333); font-weight: 700; line-height: 1.2; text-align: center; text-overflow: ellipsis; white-space: nowrap; } .elsaMobileBrand [hidden] { display: none !important; } .elsaNavMenu { display: flex; flex: 0 0 auto; flex-direction: column; min-width: 0; } .elsaNavMenu a, .elsaNavLogout { color: var(--elsa-primary-contrast, #fff); text-decoration: none; } .elsaNavMenu a, .elsaNavBranchToggle { display: flex; align-items: center; width: 210px; min-height: 45px; padding: 0 12px; border: 0; border-bottom: 1px solid var(--elsa-menu-border-color, #fff); background: var(--elsa-primary-color, #24333f); color: var(--elsa-primary-contrast, #fff); font: inherit; text-align: left; white-space: nowrap; cursor: pointer; } .elsaNavMenu > .elsaNavLeaf { width: 210px; min-height: 45px; border: 0; border-bottom: 1px solid var(--elsa-menu-border-color, #fff); background: var(--elsa-primary-color, #24333f); } .elsaNavMenu a:hover, .elsaNavMenu a:focus-visible, .elsaNavBranchToggle:hover, .elsaNavBranchToggle:focus-visible { background: color-mix(in srgb, var(--elsa-primary-color, #24333f) 82%, var(--elsa-surface, #ffffff)); outline: none; } .elsaNavBranchToggle { position: relative; } .elsaNavBranchLabel { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* Issue #4344 段③: 枝の行は「文字（.elsaNavBranchLabel のbutton）」と「＞（.elsaNavBranchCaret のbutton）」の 2つの押し場所を持つ。見た目は従来の1枚のボタンのまま——文字のbutton（.elsaNavBranchText）は枠も地も 持たず行いっぱいに伸び、行の折り返しの指定をそのまま継ぐ。＞のbuttonは描かれた＞（::after）の上へ 透明に重なるだけで、何も描かない。 **＞のbuttonは絵より上に置く（z-index: 1）。** 絵の`::after`は`transform`を持ち重なり順が上がるため、 指定が無いと絵の16px四方のクリックを行（＝文字扱い、開くだけ）が受け、＞を押しても閉じない。 */ .elsaNavBranchText { display: flex; flex: 1 1 auto; flex-wrap: inherit; align-content: inherit; align-items: center; align-self: stretch; row-gap: inherit; min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; white-space: inherit; cursor: pointer; } .elsaNavBranchCaret { position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; width: calc(12px + 1.5em); padding: 0; border: 0; background: transparent; cursor: pointer; } @media (min-width: 671px) { .elsaNavMenu .elsaNavBranch > .elsaNavBranchToggle:has(> button:focus-visible) { background: color-mix(in srgb, var(--elsa-primary-color, #24333f) 82%, var(--elsa-surface, #ffffff)); } .elsaNavBranchToggle > button:focus-visible { outline: none; } } .elsaNavBranchToggle::after { box-sizing: border-box; flex: 0 0 auto; width: 1em; height: 1em; margin-left: auto; border: 0; background: currentColor; content: ""; -webkit-mask: var(--elsa-icon-arrow-right) var(--elsa-icon-arrow-right-mask-position, center) / var(--elsa-icon-arrow-right-mask-size, var(--elsa-icon-mask-size)) no-repeat; mask: var(--elsa-icon-arrow-right) var(--elsa-icon-arrow-right-mask-position, center) / var(--elsa-icon-arrow-right-mask-size, var(--elsa-icon-mask-size)) no-repeat; transform: rotate(0deg); transition: transform 0.15s ease; } .elsaNavBranch.is-open > .elsaNavBranchToggle::after { transform: rotate(90deg); } .elsaNavChildren { max-height: 0; overflow: hidden; background: var(--elsa-primary-color, #24333f); transition: max-height 0.15s ease; } .elsaNavChildren > .elsaNavLeaf { width: 210px; min-height: 45px; padding-left: 12px; border: 0; border-bottom: 1px solid var(--elsa-menu-border-color, #fff); background: var(--elsa-primary-color, #24333f); } .elsaNavChildren > .elsaNavBranch > .elsaNavBranchToggle { width: 210px; padding-left: 12px; background: var(--elsa-primary-color, #24333f); } .elsaNavChildren > .elsaNavLeaf:hover, .elsaNavChildren > .elsaNavLeaf:focus-visible, .elsaNavChildren > .elsaNavBranch > .elsaNavBranchToggle:hover, .elsaNavChildren > .elsaNavBranch > .elsaNavBranchToggle:focus-visible { background: color-mix(in srgb, var(--elsa-primary-color, #24333f) 82%, var(--elsa-surface, #ffffff)); } .elsaNavLeaf.elsaNavLevel3 { padding-left: 12px; background: var(--elsa-primary-color, #24333f); } .elsaNavBranch.elsaNavLevel3 > .elsaNavBranchToggle { padding-left: 12px; background: var(--elsa-primary-color, #24333f); } .elsaNavLeaf.elsaNavLevel3:hover, .elsaNavLeaf.elsaNavLevel3:focus-visible, .elsaNavBranch.elsaNavLevel3 > .elsaNavBranchToggle:hover, .elsaNavBranch.elsaNavLevel3 > .elsaNavBranchToggle:focus-visible { background: color-mix(in srgb, var(--elsa-primary-color, #24333f) 82%, var(--elsa-surface, #ffffff)); } /*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ 左メニューの試用の札（Issue #4449・一号機裁定2026-10-06） 札そのものの形と色は`.elsaTrialBadge`（下の方）が持つ。ここが足すのは **左メニューという置き場所の都合**だけで、2つある。 1. **濃い地では塗りつぶす。** PCの左メニューの地はアプリ色（既定の濃紺 `#24333f`）なので、警告色の枠囲みのままだと文字のコントラストが **1.97:1**しか無く読めなかった（2026-10-06に実測。契約テスト `tests/feature_trial_badge_browser_test.js`が4.5:1以上を固定する）。 地を警告色そのもので塗り、文字はその色から導いた対の色 （`--elsa-semantic-danger-contrast`。`elsa_app_appearance_root_variables()`が 警告色の明るさから白か濃紺を選ぶ）にする。**新しい色を作らない。** 一号機の裁定の字面は「文字を濃い色にする」だが、この製品の警告色は 暗い赤（既定`#b42318`）なので濃い文字では4.5:1に届かない。**どちらを 載せるかを決めるのは既にある導出トークン1か所**で、利用者が明るい 警告色へ変えれば自動で濃い文字になる。色を固定で書くと、外観設定で 警告色を変えた会社だけが読めなくなる。 2. **札が在っても機能の名前を切らない。** 行の幅は210px固定なので、 札を足した行では名前が…で省略され（表示設定24pxでは「タスク」が 「タ·」まで詰んだ）、長い名前は行からはみ出していた。**名前を優先し、 入り切らないときは行を高くする**（`flex-wrap`）。枝の▸だけは 2行目へ落とさず右端へ固定する。 札を持つ行だけに効かせるため、描く側（`core/html/layout_nav.php`）が `.elsaNavHasBadge`を付ける。札の無い行のHTMLとCSSは1バイトも変わらない。 ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/ .elsaNavMenu .elsaTrialBadge { border-color: var(--elsa-semantic-danger-color, #b42318); background: var(--elsa-semantic-danger-color, #b42318); color: var(--elsa-semantic-danger-contrast, #ffffff); } /* Issue #4479: 未読の札は**メインカラーの塗りの丸**なので、地がメインカラーそのものの PCの左メニューでは地に溶けて見えなくなる。ここでだけ地と文字を入れ替える （同じ対のトークンを使い、新しい色は作らない）。スマホ幅の左メニューは明るい地 なので、下の`@media`で元の向きへ戻す。 */ .elsaNavMenu .elsaUnreadBadge { background: var(--elsa-primary-contrast, #ffffff); color: var(--elsa-primary-color, #24333f); } .elsaNavMenu a.elsaNavHasBadge, .elsaNavMenu .elsaNavBranchToggle.elsaNavHasBadge { flex-wrap: wrap; align-content: center; padding-top: .3em; padding-bottom: .3em; row-gap: .15em; white-space: normal; } /* 名前の省略をやめる（名前が長い枝では折り返して全部見せる）。 */ .elsaNavHasBadge > .elsaNavBranchLabel, .elsaNavHasBadge > .elsaNavBranchText > .elsaNavBranchLabel { overflow: visible; text-overflow: clip; } /* ▸は行の右端・上下中央へ固定する。折り返した2行目へ送ると、開閉の記号が名前から離れて別の行の印に見える。 */ .elsaNavMenu .elsaNavBranchToggle.elsaNavHasBadge { padding-right: calc(12px + 1.5em); } .elsaNavMenu .elsaNavBranchToggle.elsaNavHasBadge::after { position: absolute; top: 50%; right: 12px; margin-left: 0; transform: translateY(-50%); } .elsaNavBranch.is-open > .elsaNavBranchToggle.elsaNavHasBadge::after { transform: translateY(-50%) rotate(90deg); } .elsaNavUser { display: block; flex: 0 0 auto; min-width: 0; color: var(--elsa-primary-contrast, #fff); background: var(--elsa-primary-color, #24333f); } .elsaNavAccountToggle { min-height: 64px; } .elsaNavUserInfo { display: flex; flex: 1 1 auto; flex-direction: column; justify-content: center; min-width: 0; overflow: hidden; color: inherit; } .elsaNavUserInfo > span { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .elsaNavCompanyName { font-size: 1.05em; font-weight: 700; } .elsaNavUserName { margin-top: 2px; font-size: 0.85em; } .elsaNavLogout { display: flex; align-items: center; width: 210px; min-height: 45px; padding: 0 12px; border-bottom: 1px solid var(--elsa-menu-border-color, #fff); background: var(--elsa-primary-color, #24333f); } .elsaNavLogout:hover, .elsaNavLogout:focus-visible { background: color-mix(in srgb, var(--elsa-primary-color, #24333f) 82%, var(--elsa-surface, #ffffff)); outline: none; } .elsaNavToggleButton { display: none; } .elsaVisuallyHidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* **本文へ飛ぶリンク**（2026-09-04、Issue #2955 C5）。``の最初に在り、 Tabの1回目で来る。ふだんは`.elsaVisuallyHidden`と同じ切り抜きで隠し、 **焦点が当たったときだけ**左上へ実体として出す。 `#elsaLayout`は本文の器なので、その左上に重ねて出す。色はアプリ色と その上に載る文字のトークンだけを読む——ここで実色を書かない。 */ .elsaSkipLink { position: absolute; top: 0; left: 0; z-index: 1000; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; background: var(--elsa-primary-color, #24333f); color: var(--elsa-primary-contrast, #fff); text-decoration: none; } .elsaSkipLink:focus-visible { width: auto; height: auto; padding: 8px 12px; margin: 8px; overflow: visible; clip: auto; border-radius: 4px; outline: 2px solid var(--elsa-primary-contrast, #fff); outline-offset: -4px; } /* 行き先そのものは`tabindex="-1"`で受けるだけなので、輪郭は出さない。 */ #elsaLayout:focus { outline: none; } @media (max-width: 670px) { /* メニューが画面の外へ出るので、浮かせる操作の基準もウィンドウへ戻す。 */ body, body.elsaHasNavigation { --elsa-content-left: 0px; --elsa-mobile-nav-header-height: 52px; --elsa-mobile-nav-logo-height: 39px; --elsa-mobile-nav-transition: 0.15s ease; display: block; padding-left: 0; } #elsaLayout { padding: calc(var(--elsa-mobile-nav-header-height) + 12px) 16px 16px; } /* 刻印の左右も本文と同じ端へ揃える。**スマホ幅では左寄せにする。** 右下にはメニューを開く丸ボタンが`position: fixed`で載っており、 右寄せのままだと最下部まで送ったときに文字が隠れる。 */ .elsaAppFooter { padding: 0 16px 16px; text-align: left; } #elsaNav { position: static; width: 0; height: 0; min-height: 0; padding: 0; overflow: visible; box-shadow: none; } .elsaNavBrand { position: fixed; z-index: 32; top: 0; right: 0; left: 0; display: flex; width: 100%; height: var(--elsa-mobile-nav-header-height); padding: 6px; border-bottom: 1px solid var(--elsa-border, #d2d2d2); border-radius: 0 0 22px 22px; background: var(--elsa-surface-sunken, #f5f7f9); box-shadow: 0 4px 12px rgba(36, 51, 63, 0.14); transition: border-radius var(--elsa-mobile-nav-transition); } .elsaNavBrand.is-mobile-menu-open { border-radius: 0; } .elsaNavDesktopBrand { display: none; } .elsaNavMobileBrand { display: flex; width: min(100%, 320px); height: var(--elsa-mobile-nav-logo-height); } .elsaNavMobileBrand .elsaMobileBrandImage { width: auto; height: var(--elsa-mobile-nav-logo-height); max-width: 100%; } .elsaNavMobileBrand .elsaBrandWordmark { color: var(--elsa-content-text-color, #333333); } .elsaNavMobileBrand .elsaMobileBrandText { font-size: clamp(17px, 5vw, 22px); } .elsaNavUser { display: block; width: 100%; background: transparent; } .elsaNavToggleButton { position: fixed; z-index: 33; right: 20px; bottom: 20px; left: auto; display: grid; place-items: center; width: 50px; height: 50px; padding: 0; border: 0; border-radius: 50%; background: var(--elsa-primary-color, #24333f); color: var(--elsa-primary-contrast, #fff); cursor: pointer; } .elsaNavToggleButton::before { display: block; width: 24px; height: 24px; background: currentColor; content: ""; -webkit-mask: var(--elsa-icon-menu) var(--elsa-icon-menu-mask-position, center) / var(--elsa-icon-menu-mask-size, var(--elsa-icon-mask-size)) no-repeat; mask: var(--elsa-icon-menu) var(--elsa-icon-menu-mask-position, center) / var(--elsa-icon-menu-mask-size, var(--elsa-icon-mask-size)) no-repeat; } .elsaNavToggleButton.is-mobile-menu-open::before { -webkit-mask: var(--elsa-icon-close) var(--elsa-icon-close-mask-position, center) / var(--elsa-icon-close-mask-size, var(--elsa-icon-mask-size)) no-repeat; mask: var(--elsa-icon-close) var(--elsa-icon-close-mask-position, center) / var(--elsa-icon-close-mask-size, var(--elsa-icon-mask-size)) no-repeat; } .elsaNavToggleButton > span { display: none; } .elsaNavMenu { position: fixed; z-index: 30; right: 0; bottom: -100%; left: 0; display: flex; width: 100%; height: calc(100dvh - var(--elsa-mobile-nav-header-height)); padding: 0 0 70px; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; background: var(--elsa-surface-sunken, #f5f7f9); transition: bottom var(--elsa-mobile-nav-transition); } #elsaNav.is-mobile-menu-open .elsaNavMenu { bottom: 0; } .elsaNavMenu a, .elsaNavBranchToggle { width: 80%; margin: 0 auto; color: var(--elsa-text-muted, #667085); } /* `width`と`margin`をここでも書くのは、直前の`.elsaNavMenu a`（詳細度0,1,1）が PC用の`.elsaNavMenu > .elsaNavLeaf`（詳細度0,2,0）に負けるためである。 第1階層の独立リーフが210pxのまま`margin: 0 auto`で 中央へ寄り、他の行と左端が揃わなかった（2026-08-13の利用者指摘）。 同じ詳細度で後から書くことで揃える。 */ .elsaNavMenu > .elsaNavLeaf, .elsaNavMenu > .elsaNavBranch > .elsaNavBranchToggle { width: 80%; min-height: 65px; margin: 0 auto; border: 0; border-top: 1px solid var(--elsa-menu-border-color, #fff); background: transparent; } /* 区切り線は「行の上側」だけが持つ。アカウント行が`border-bottom`を持つと 直後の行の`border-top`と2本並び、幅が違えば二重線に見える （2026-08-13の利用者指摘「アカウント情報下の線が変になっています」）。 */ .elsaNavMenu > .elsaNavUser > .elsaNavAccountToggle { min-height: 72px; border-top: 0; border-bottom: 0; background: transparent; } .elsaNavMenu > .elsaNavLogout { min-height: 65px; border: 0; border-top: 1px solid var(--elsa-menu-border-color, #fff); background: transparent; } .elsaNavMenu > :first-child > .elsaNavBranchToggle, .elsaNavMenu > :first-child.elsaNavLeaf { border-top: 0; } .elsaNavChildren { background: transparent; } .elsaNavChildren > .elsaNavLeaf, .elsaNavChildren > .elsaNavBranch > .elsaNavBranchToggle { width: 80%; min-height: 55px; padding-left: 28px; border: 0; background: transparent; } .elsaNavMenu a:hover, .elsaNavMenu a:focus-visible, .elsaNavBranchToggle:hover, .elsaNavBranchToggle:focus-visible { background: transparent; } /* **スマホ幅のメニューの地は白に近い面**（`--elsa-surface-sunken`）なので、 試用の札は枠囲みへ戻す（Issue #4449・一号機裁定2026-10-06「白い地は 今の枠囲みのまま」）。塗りつぶしのままにすると、明るい地の上に警告色の 塊が載って、行の名前より札の方が強く見える。コントラストはどちらの 見せ方でも4.5:1以上を契約テストが固定する。 */ .elsaNavMenu .elsaTrialBadge { border-color: currentColor; background: transparent; color: var(--elsa-semantic-danger-color, #b42318); } /* 未読の札も明るい地では元の向き（地＝メインカラー）へ戻す（Issue #4479）。 */ .elsaNavMenu .elsaUnreadBadge { background: var(--elsa-primary-color, #24333f); color: var(--elsa-primary-contrast, #ffffff); } .elsaNavLeaf.elsaNavLevel3, .elsaNavBranch.elsaNavLevel3 > .elsaNavBranchToggle { padding-left: 46px; } .elsaNavMenu .elsaNavLeaf[aria-current="page"] { border-radius: 4px; background: var(--elsa-selected-bg, #dceeff); color: var(--elsa-selected-color, #333333); font-weight: 700; } .elsaNavMenu .elsaNavLeaf.elsaNavLevel3[aria-current="page"] { background: var(--elsa-selected-bg, #dceeff); } .elsaNavMenu a:focus-visible, .elsaNavBranchToggle:focus-visible, .elsaNavBranchToggle:has(> button:focus-visible) { outline: 2px solid var(--elsa-primary-color, #24333f); outline-offset: -2px; } } @media (max-width: 480px) { #elsaLayout { padding: calc(var(--elsa-mobile-nav-header-height) + 8px) 8px 8px; } .elsaAppFooter { padding: 0 8px 8px; } } /*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ ユーザー切替（見るだけ）の知らせ（Issue #4578 PR-B） ページの一番上、ヘッダーよりさらに上に**文書の流れの中で場所を取って**出す。 重ねない（`position: fixed`にしない）。ヘッダー以下はその分だけ下へずれる。 上端に固定している部品（スマホのヘッダー・メニュー、統合窓のヘッダー・木・窓の 高さ、左メニューの最低の高さ）は、`body.elsaUserSwitchActive`のときだけ `--elsa-user-switch-band-height`（core/js/elsa_user_switch_band.js が実測して置く） の分だけ下げる・縮める。**画面ごとの分岐を書かず、ここ1か所で持つ。** ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/ .elsaUserSwitchBand { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; box-sizing: border-box; width: 100%; min-width: 0; margin: 0; padding: 6px 16px; border-bottom: 2px solid var(--elsa-semantic-caution-color, #dc6803); background: var(--elsa-surface-sunken, #f5f7f9); color: var(--elsa-content-text-color, #333333); } .elsaUserSwitchBandText { flex: 1 1 12em; min-width: 0; overflow-wrap: anywhere; font-weight: bold; } .elsaUserSwitchBandForm { display: flex; flex: 0 0 auto; justify-content: flex-end; margin: 0 0 0 auto; } body.elsaUserSwitchActive.elsaHasNavigation { grid-template-rows: auto 1fr auto; } body.elsaUserSwitchActive.elsaHasNavigation > .elsaUserSwitchBand { grid-row: 1; grid-column: 1 / -1; } body.elsaUserSwitchActive.elsaHasNavigation > #elsaNav { grid-row: 2 / -1; } @media (min-width: 671px) { body.elsaUserSwitchActive.elsaHasNavigation > #elsaNav { min-height: calc(100vh - var(--elsa-user-switch-band-height, 0px)); min-height: calc(100dvh - var(--elsa-user-switch-band-height, 0px)); } } body.elsaUserSwitchActive.elsaHasNavigation #elsaLayout { grid-row: 2; } body.elsaUserSwitchActive.elsaHasNavigation > .elsaAppFooter { grid-row: 3; } body.elsaUserSwitchActive.elsaAppExplorerBody { grid-template-rows: auto minmax(0, 1fr) auto; } body.elsaUserSwitchActive .elsaAppExplorer { --elsa-app-explorer-offset: var(--elsa-user-switch-band-height, 0px); } @media (max-width: 670px) { /* スマホのヘッダーは上端に固定なので、知らせも場所を取ったまま上端に留める（スクロールで知らせだけが流れて、ヘッダーの上に隙間が空くのを防ぐ）。 */ body.elsaUserSwitchActive > .elsaUserSwitchBand { position: sticky; z-index: 32; top: 0; } body.elsaUserSwitchActive .elsaNavBrand { top: var(--elsa-user-switch-band-height, 0px); } body.elsaUserSwitchActive .elsaNavMenu { height: calc(100dvh - var(--elsa-mobile-nav-header-height) - var(--elsa-user-switch-band-height, 0px)); } body.elsaUserSwitchActive .elsaAppExplorerMobileHeader { top: var(--elsa-user-switch-band-height, 0px); } body.elsaUserSwitchActive .elsaPaneWindow.elsaAppExplorer.is-tree-open > .elsaAppExplorerNavPane { top: calc(var(--elsa-mobile-header-height) + var(--elsa-user-switch-band-height, 0px)); height: calc(100dvh - var(--elsa-mobile-header-height) - var(--elsa-user-switch-band-height, 0px)); } /* 統合窓は body の上余白でヘッダーの場所を空けている。知らせを最上部に置き、その下へ空ける。 */ body.elsaUserSwitchActive.elsaAppExplorerBody { padding-top: 0; } body.elsaUserSwitchActive.elsaAppExplorerBody > .elsaUserSwitchBand { margin-bottom: var(--elsa-mobile-header-height); } } @media (prefers-reduced-motion: reduce) { .elsaNavBrand, .elsaNavToggleButton > span, .elsaNavMenu, .elsaNavChildren, .elsaNavBranchToggle::after { transition-duration: 0.01ms; } } body.elsaLoginPage { min-height: 100vh; min-height: 100dvh; padding-left: 0; background: var(--elsa-surface-sunken, #f5f7f9); } .elsaLoginPage #elsaLayout { min-height: 100vh; min-height: 100dvh; padding: 24px; } .elsaLoginShell { display: grid; min-height: calc(100vh - 48px); min-height: calc(100dvh - 48px); place-items: center; } .elsaLoginCard { width: min(100%, 560px); padding: 32px; border: 1px solid var(--elsa-border, #d2d2d2); border-radius: 8px; background: var(--elsa-surface, #ffffff); box-shadow: 0 8px 24px rgba(36, 51, 63, 0.10); } .elsaLoginBrand { display: flex; width: 100%; min-height: 64px; margin-bottom: 20px; padding: 0 12px; } /* ロゴの大きさは画面固有の固定px・独自倍率を持たない（Issue #3481）。 ヘッダー（`.elsaAppExplorerMobileHeaderBrand .elsaMobileBrandImage`、 `core/css/elsa_app_explorer.css`）と同じ計算・同じ変数 `--elsa-header-logo-scale`（外観設定「ロゴの大きさ（%）」、Issue #3418）を そのまま使う。ログイン前は会社・本人の上書きが無いので、ここへ届く値は 必ずシステム標準（`core/html/layout_head.php`が`:root`へ配る値）である。 基準の文字サイズ（`1em`）もヘッダーと同じ`#elsaLayout`の `--elsa-form-font-size`をそのまま継ぐ——ログイン画面も`#elsaLayout`の 子孫（`.elsaLoginPage #elsaLayout`）なので、ここで新たに指定しない。 外観設定のシステム標準を変えればログイン画面のロゴも追従する。 */ .elsaLoginBrand .elsaMobileBrandImage { width: auto; height: calc(1em * var(--elsa-header-logo-scale, 1.2)); max-width: 100%; } .elsaLoginBrand .elsaBrandWordmark { color: var(--elsa-content-text-color, #333333); } .elsaLoginBrand .elsaMobileBrandText { font-size: calc(1em * var(--elsa-header-logo-scale, 1.2)); white-space: normal; overflow-wrap: anywhere; } .elsaLoginCard h1 { margin: 0 0 20px; text-align: center; } .elsaLoginCard > .elsaAlertBlock { margin: 0 0 8px; } /* ログイン画面はパスキー認証（顔認証・パスキーでログイン）と、その後に 続く別formの間に空のSTATUSブロックを挟む。STATUSは空のとき `display: none`になるため、隣接結合子（+）だけでは間に挟まった瞬間に 隙間が消え、直前のCOMMANDボタンと後続formが密着して見える （2026-08-13利用者指摘）。#elsaLayout直下の登録ブロックが一般兄弟結合子 （~）でこの問題を解決しているのと同じ考え方を、このカードのスコープに 限って適用する。共通変数`--elsa-block-spacing`はそのまま使い、値は変えない。 STATUSは``のためinlineのままでは`margin-top`が効かず、文字が入った ときだけ`display: block`にする（空のときは既存の`:empty{display:none}`が勝つ）。 */ .elsaLoginCard > .elsaCommandBlock + .elsaStatusBlock:not(:empty) { display: block; margin-top: var(--elsa-block-spacing, 8px); } .elsaLoginCard > .elsaCommandBlock ~ .elsaLoginForm { margin-top: var(--elsa-block-spacing, 8px); } .button.elsaCommandBlock--wide { display: block; width: 100%; height: var(--elsa-block-action-height); min-height: var(--elsa-block-action-height); margin: 0; } @media (max-width: 640px) { .elsaLoginPage #elsaLayout { padding: 16px; } .elsaLoginShell { min-height: calc(100vh - 32px); min-height: calc(100dvh - 32px); } .elsaLoginCard { padding: 24px 16px; } } @media (max-width: 360px) { .elsaLoginPage #elsaLayout { padding: 8px; } .elsaLoginShell { min-height: calc(100vh - 16px); min-height: calc(100dvh - 16px); } .elsaLoginCard { padding: 20px 12px; } } .block { display: flex; flex-wrap: wrap; align-items: stretch; padding-top: 0; } .block + .block { padding-top: var(--elsa-block-spacing, 8px); } /* `elsa_block_draw()`を画面から直接呼ぶ経路（field_draw.phpの行に包まれない 裸の`.elsaListContainer`）は、以前は先行するのがLINEのときだけ隙間を 持ち、ALERT・STATUS・別のLIST・CAPACITY・CONTROLLER・TABパネルの内容 などが先行すると隙間が0のままだった（Issue #3707）。 **先行要素の種類を問わない一般規則にする。** field_draw.php経由で行 （`.block`）に包まれた経路は、行自身が上の`.block + .block`で隙間を 持つため対象外のままでよい（`.elsaListContainer`は`.right`の中で 先頭のまま残り、二重にしない）。`*`は直前の兄弟要素の種類を問わない 汎用結合子で、コンテナの先頭要素（前の兄弟が無い）ならこの規則自体が 発火しないため、追加のfirst-child規則は要らない（Issue #3702・PR #3704のLINE側first-child規則と対になる「先頭でなければ隙間を持つ」側 の規則）。 */ * + .elsaListContainer { margin-top: var(--elsa-block-spacing, 8px); } /* 意味を持たない配置コンテナで登録済みブロックを縦に並べる場合も、 画面固有marginや空のspacerを作らず共通間隔だけを使う。 直下のブロック自身のpaddingはgrid gapと二重にしない。 */ .elsaBlockStack { display: grid; gap: var(--elsa-block-spacing, 8px); width: 100%; } .block.elsaBlockStackItem { padding-top: 0; } .block.elsaBlockStackItem[hidden] { display: none; } /* COMMAND owns no vertical gap; its preceding registered block supplies the configured spacing. **上（縦）の値をここで書かない**（Issue #3489 段階2・第3回）。以前は `margin: 0 8px 0 0`という一括指定で四辺すべてを決めており、上の0が 下の共通規則（`:not(.elsaCommandBlock) + .elsaCommandBlock`、 「ブロック同士の間隔」＝`--elsa-block-spacing`）を詳細度(0,3,0)対(0,2,0)で 打ち消していた。その結果、Issue #3707でわざわざ「先行要素の種類を問わない 一般規則」へ直したその規則は、既定のCOMMAND（`--wide`以外＝アプリの ほぼ全部）には一度も効いていなかった。2026-09-22の実測では、中央請求管理 「容量の既定値」の保存ボタンとサーバー管理「お問い合わせAI設定」タブの 保存ボタンが、直前のフォーム・入力欄へ隙間0pxで密着していた。 横（`margin-right`）はボタンが横に並ぶときの間隔で、縦の隙間とは別の 持ち主である。ここではそのまま残し、**縦だけを共通規則へ返す**。 返し方は`--wide`が既にやっている形をそのまま使う。`.button.elsaCommandBlock--wide` （詳細度(0,2,0)）は共通規則と同じ詳細度で、**共通規則より前に** 書いてあるため「兄弟が無ければ0・あれば共通間隔」が自然に決まる。既定の COMMANDにも同じ形の`.button.elsaCommandBlock { margin-top: 0; }`（(0,2,0)）を 1行だけ置く。`.button`の`margin: 4px …`がCOMMANDのルートへ届かないことは これで変わらない（`tests/block_root_spacing_test.php`が`.button`を走査から 外している根拠）。 */ .button.elsaCommandBlock:not(.elsaCommandBlock--wide) { margin-right: 8px; margin-bottom: 0; margin-left: 0; } .button.elsaCommandBlock { margin-top: 0; } /* 帯では器の共通gapだけで間隔を作る。既定COMMANDの余白は変えない。 */ .button.elsaCommandBlock.elsaCommandBlock--band { margin: 0; } .button.elsaCommandBlock--nowrap { white-space: nowrap; } .button.elsaCommandBlock.elsaCommandBlock--checkboxAction { height: var(--elsa-block-action-height); min-height: var(--elsa-block-action-height); margin: 0 0 0 auto; align-self: center; } /* 裸のCOMMAND（`elsa_block_draw()`直接呼び出し。CONTROLLERを介さない 単独ボタン。item.php・login.php・manual_management.phpなどが多数 使う）も、以前は先行するのがLINEか`.block`行のときだけ隙間を持って いた（Issue #3707の監査で発見。base.cssの`+ .elsa`規則を全数grepし、 LISTと同じ狭い書き方が他に無いか確認した結果）。ALERT・STATUS・ CAPACITY・LISTなど他のブロックが先行すると隙間が0のままだった。 **COMMAND同士の隣接（帯の中の並び）は対象から外す。** 帯はボタン間の 間隔を自分のgapだけで持ち、margin-topを足すと折り返し行がずれる （`:not(.elsaCommandBlock)`で先行がCOMMAND以外のときだけに絞る）。 **ラベルタブ・トレイリング操作・CONTROLLERの中の裸COMMANDは対象外。** これらは行内の装飾であり、器のgapか自分のmarginで間隔を持つ。この 規則（詳細度0,2,0）が先行要素の種類を問わず届いてしまわないよう、 `.elsaFieldControlGroup--trailing > .elsaCommandBlock`（下、`margin: 0`）と `.left.elsaFieldHeader > .elsaCommandBlock`（下に`margin-top: 0`を 追記）は既存の規則で保護する。 **CONTROLLERの子は`.elsaController > .elsaCommandBlock`という外部の 祖先セレクタでは保護しない。** ブロックのルート要素は自分の外の祖先 セレクタから装飾しない契約（`tests/field_block_style_test.php`）がある ため、CONTROLLERが自分の子（`elsa_field_block_command()`経由の全ての COMMANDへ既に付与している`.elsaControllerButton`）へ**自分自身の クラスの組み合わせ**として書き戻す。 */ :not(.elsaCommandBlock) + .elsaCommandBlock { margin-top: var(--elsa-block-spacing, 8px); } .elsaCommandBlock.elsaControllerButton { margin-top: 0; } /* ブロック間の隙間の正本は、ここから下の数行だけである。値は表示設定 「ブロック同士の間隔」から`--elsa-block-spacing`として流れてくる。 **ブロックは自分のルート要素へ縦マージンを書かない。** 書くと、利用者が 設定を変えても動かない隙間が混じる。2026-08-14に利用者がシステム設定画面の DevToolsで`.elsaConnectionStatusBlock { margin: 8px 0 24px; }`を見つけて 指摘した。`margin-top`は下の規則（id付きで詳細度が高い）に負けて死んで いたが、`margin-bottom: 24px`には対抗する規則が無く、下側だけが設定を 無視して常に24px空いていた。同じ書き方がCAPACITY・履歴・カレンダー・ 予定詳細・CHAT・スペースにもあり、まとめて撤去した。 検査は`tests/block_root_spacing_test.php`。例外は同ファイルへ理由付きで書く。 ブロック自身が持つblock_spacingは先行する登録ブロックがある場合だけ有効。 link/scriptなど非ブロック要素が先にあっても、配置領域の最初のブロックは0にする。 **「最初のブロック」の判定は、画面が手で書いた`
`の中身まで見る** （Issue #3489 段階2・第3回）。左の`:not()`は兄弟だけを見るため、直前の 内容が``に包まれていると——中に入力欄の行（`.block`）が何本あっても ——「先行する登録ブロックが無い＝配置領域の最初のブロック」と誤判定し、 この0が共通規則（「ブロック同士の間隔」）を詳細度(1,6,0)対(0,2,0)で 打ち消していた。2026-09-22の実測では、中央請求管理「容量の既定値」の 保存ボタンが、その上の4本の入力欄を抱えた``へ隙間0pxで密着して いた。`form`が内容であることは下の`… + form`へ共通間隔を配る規則 で既に決めてあり、ここだけ数えていなかった。 **中身のある``だけを数える。** CSRFの隠し欄だけを抱えた``の ように1pxも描かないものまで「先行する内容」に数えると、配置領域の本当の 先頭のブロックが下へずれる。`:has()`で行（`.block`）か登録ブロック （`[data-block-type]`）を1つ以上持つ``に限る。 */ #elsaLayout > [data-block-type]:not(.elsaController):not(.block ~ [data-block-type]):not([data-block-type] ~ [data-block-type]):not(form:has(.block, [data-block-type]) ~ [data-block-type]) { margin-top: 0; } /* LIST自身は通常の配置領域外周へ余白を作らない。 */ .block.list { padding-top: 0; } /* #elsaLayout直下では、登録ブロックと共通field rowの兄弟間だけへ設定値を適用する。 */ #elsaLayout > [data-block-type]:not(.elsaController) ~ [data-block-type]:not(.elsaController), #elsaLayout > .block ~ [data-block-type]:not(.elsaController) { margin-top: var(--elsa-block-spacing, 8px); } #elsaLayout > [data-block-type]:not(.elsaController) ~ .block, #elsaLayout > .block ~ .block { padding-top: var(--elsa-block-spacing, 8px); } /* CONTROLLER owns its vertical spacing; do not add block_spacing at either boundary. */ #elsaLayout > .elsaController + [data-block-type]:not(.elsaController) { margin-top: 0; } #elsaLayout > .elsaController + .block { padding-top: 0; } /* ALERTはTABや画面固有のフォームなど、#elsaLayout直下ではない配置領域にも置かれる。 画面側のmarginではなく、隣接する登録済みブロックとの間だけ共通block spacingを与える。 連続ALERTはelsaPageMessagesのgapが所有するため、この兄弟契約では二重にしない。 */ #elsaLayout .block + .elsaAlertBlock, #elsaLayout [data-block-type]:not(.elsaAlertBlock) + .elsaAlertBlock { margin-top: var(--elsa-block-spacing, 8px); } #elsaLayout .elsaAlertBlock + .block { padding-top: var(--elsa-block-spacing, 8px); } #elsaLayout .elsaAlertBlock + [data-block-type]:not(.elsaController):not(.elsaAlertBlock) { margin-top: var(--elsa-block-spacing, 8px); } /* ブロックの直前に何があっても（登録ブロックか、画面固有の無名wrapperか、 種類を問わない）、直後のブロックとの隙間は共通間隔1つで持つ（Issue #3728 決定60・決定65）。LIST（`* + .elsaListContainer`）やCOMMAND（`:not(.elsaCommandBlock) + .elsaCommandBlock`）と同じ「先行要素の種類を問わない一般規則」の対象を、 後続側（`.block`・`[data-block-type]`のブロックルート全般）へ広げたものである。 2026-09-15、容量タブでCAPACITYの2枚カードと会社別内訳LISTが隙間なく接触 している指摘（オーナー決定60）で最初に発覚し、`.elsaCapacityBlock + .block` のように先行要素の組み合わせを1つずつ列挙して直した。同じ日、テナント 「AI利用設定」タブの自動保存フォームの包み（`elsa_fleet_tenant_panel_draw_ai_usage()` が出す`
`、クラスを持たない画面固有wrapper）と その直後のLIST行（`.block.list`）が同じ理由で接触した（決定65）。先行要素を CAPACITY・STATUS CARDだけに絞っていたため、それ以外のwrapperには効かなかった。 **先行要素を列挙するたびに直すのをやめ、「CONTROLLER以外なら何でもよい」という 一般規則1つへ吸収する。** fleetサーバーの各タブ・テナントの容量表示は `#elsaLayout`の直下ではなく統合窓（app_explorerウィンドウ）の何段か内側に 描くため、`#elsaLayout > `直下限定の共通規則がそもそも届かない場所でもある。 **`#elsaLayout`を経由する祖先セレクタは使わない**——CAPACITY自身のCSSが 祖先に依存しないことを`tests/capacity_block_test.php`が固定している （`strpos($css, "#elsaLayout .elsaCapacity") === false`）ため、LIST・COMMANDと 同じ完全に汎用なsibling規則にする。CONTROLLERだけは左辺の`:not(.elsaController)` で先行要素から除く。CONTROLLERは`--elsa-controller-spacing`という別の設定を 自分で持ち、直後のブロックへ余白を要求しない契約（`#elsaLayout > .elsaController + .block { padding-top: 0; }`ほか）を保つためで、隣接結合子（+）を使うぶん、 COMMANDの一般化と同じくCONTROLLER以外が割り込む余地もない。 **`.block`側だけ`.elsaBlockStackItem`も左辺から除く。** スタック内部の隣接 （`.elsaBlockStack`のgridがgapを持つ行同士）は、`.block.elsaBlockStackItem { padding-top: 0; }`がこの一般規則と同じ2クラスの詳細度でタイになり、後に 書いた側が勝つ。除かずに書くと、スタック内部の隙間がgapとこの規則の二重に なる。CAPACITY・STATUS CARDがスタックの外から先頭アイテムの直前に来る場合は `.elsaBlockStackItem`ではないため対象のままで、この場合だけ隙間が要る （実機で確認済み）。`[data-block-type]`側は、`elsa_field_draw()`経由の行 （`.elsaBlockStackItem`を含む）が`data-block-type`を出さないため対象化されず、 除外を書く必要がない。 **`.block.list`（`padding-top: 0`）より後に置く。** 同じ`.block`2クラスで 詳細度がタイになるため、後に書いた側がタイで勝つ。先に置くと、先行要素の 直後のLIST行へこの規則が一切効かなくなる（実機で確認済み）。 2026-09-15、PR #3753（Issue #3728）のCIで2件再発した。**原因は同じ—— 自分の上部間隔を既に自分の専用契約で持つブロックまで、この一般規則が `[data-block-type]`だけを見て二重に効かせてしまうこと。** CONTROLLERを 左辺で除いているのと同じ理由で、右辺（実際に margin-top を受け取る側） からも「専用契約を持つブロック」を除く。 - LOGIN画面の「または」区切り線（`.elsaLineBlock`）。上のLINEの節が 説明するとおり、自分の`padding-top: var(--elsa-line-top-spacing, 8px)` だけで上部間隔を持つ設計で、先頭要素なら`:first-child`規則が0へ 落とす。この規則が margin-top を追加すると padding と二重になり、 箱どうしが密着する設計（`gap(passwordForm, line) === 0`）が崩れる （`tests/login_card_spacing_browser_test.js`）。 - COMMAND（`.elsaCommandBlock`）。上の`:not(.elsaCommandBlock) + .elsaCommandBlock`が先行要素の種類を問わずCOMMAND自身の上部間隔を 既に決めており、COMMAND同士の隣接は帯の中の並びとして意図的に0の ままにする契約（813行目コメント）。COMMANDも`[data-block-type]`を 持つため、この一般規則（詳細度0,3,0）が`:not(.elsaCommandBlock) + .elsaCommandBlock`（詳細度0,2,0）より勝ってCOMMAND同士の隙間を 8pxへ引き上げてしまい、CHATブロックの入力欄下段（＋・AI自動応対 トグル・送信2つが横一列に並ぶ`.elsaChatComposerActions`）で送信 ボタン2つ目だけ下がって段が崩れた （`tests/support_request_accordion_browser_test.js`）。 2026-09-15、Issue #3728のフォローアップでもう1件見つかった。左辺の `:not(...)`は「何かある」ことしか見ないため、**画面に何も描かない 先行要素**（`elsa_app_setting_use_inputs_html()`が出す``、 描画結果が空文字列のときに残る空`