/* * カテゴリ一覧ページ（circles/vocalists/arrangers/lyricists の * index・list・category）専用のCSS。Propshaftから直接配信するプレーンCSSで、 * Tailwindのビルドを経由しない。 * * 以前はここに.site-navigation/.nav-header/.nav-panel/.nav-brand/.nav-toggle/ * .nav-list/.btn/.input/.input-addon-group/.tag/.badge/.collapse等、 * サイト全体で使う共通レイアウトクラスのBootstrap相当の素の定義を持たせて * いたが、実際にはこれらのページもでtailwind.cssを読み込んでおり * （application.html.erbのstylesheet_link_tag "tailwind"が先、 * このdirectory.cssは`content_for :head`経由で後から読み込まれる）、 * tailwind.css側（base.css/components.css）に同じクラスの正しい定義が * 既に存在していた。このファイルは@layerで囲んでいない素のCSSとして * 後から読み込まれるため、Tailwind v4のカスケードレイヤー仕様により * @layer内にある正しい定義より常に優先されてしまい、 * - `.nav-toggle { display: none; }`に対応する「小さい幅ではblockに戻す」 * ルールがなく、ハンバーガーメニューが常に非表示になる * - `.nav-brand { float: left; height: 50px; ... }`が実際のflexレイアウト * （height: 64px）を破壊し、ヘッダーの高さがおかしくなる * - `.site-navigation { border: 1px solid transparent; }`がサイドバー幅を * 2px縮める（sidebar.cssで見つかったのと同種の不具合） * - `.btn`/`.input`が旧Bootstrap既定値（radius 4px等）で上書きされる * - `@media (min-width: 768px)`のfloatベースの旧レスポンシブ切り替えが、 * 992px基準の実際のサイドバー切り替えと衝突する * などの実害を引き起こしていた。実際にはこのファイル固有のスタイルは * 何も残っていなかったため、共通クラスの定義は全て削除した。 * 今後このページ群だけに必要な調整が生じた場合は、他ページと重複しない * 一意なクラス名（例: .directory-*）でここに追加すること。 * * 2026-08-25: h1 のpadding-top:20pxを打ち消す。 * developではこのページ群（circles/vocalists/arrangers/lyricistsの * index・list・category）だけ`directory.scss`を読み込み、これは * `layout.scss`をimportして`.content-shell`/`.page-header`/h1の * 見た目（font-size・margin等）は他ページと共通化しているが、 * `sb-admin-2.scss`はimportしていない。h1のpadding-top:20pxは * sb-admin-2.scss由来のルールのため、develop側でこのページ群のh1だけ * padding-topが付かない（margin/paddingともに0で、UA既定の上マージンも * layout.scssのh1ルールがmargin:0で打ち消し済み）。 * 現行のsidebar.cssの`h1 { padding-top: 20px }`は@layer外の素のCSSで * 全ページに一律適用されるため、tailwind.cssの後に読み込まれる本ファイル * （同じく@layer外）でこのページ群だけ0に戻す。 * * 2026-08-25: h2 のmargin-bottom:10pxも同じ理由で打ち消す。 * base.cssの`@layer base`にはBootstrap 3.4の見出し既定値 * （h1,h2,h3 { margin-top: 20px; margin-bottom: 10px }）を移植したブロックが * あるが、これもsb-admin-2.scss同様developの`directory.scss`には存在しない * （directory.scssはbootstrapを一切importしていない）。 * `.category-directory > h2`はmargin-topとfont-size/font-weightだけを * 明示し、margin-bottomは指定していないため、developではUA既定値 * （h2自身のfont-size 24pxに対する0.83em、約20px）にフォールバックするが、 * 現行ではこのページ群にも一律適用される上記ブロックの10pxが代わりに * 効いてしまう。`revert`でauthor起源の値を取り除き、UA既定へ戻す。 * 同じブロックはline-height:1.1とcolor:inheritも一律に足すが、 * `.category-directory > h2`と`.category-group h3`はどちらもcolorと * line-heightを指定していないため、これらも合わせてUA既定へ戻す * （h2のmargin-bottomと違い高さへの影響はごくわずかだが、色は無指定なら * 本文色のまま、太字はfont-weightで別途指定済みなので影響しない）。 */ h1 { padding-top: 0; } h2, h3 { line-height: revert; color: revert; } h2 { margin-bottom: revert; } /* * 2026-08-25: .tab-nav > li > a のline-height:1.42857143も同じ理由で打ち消す。 * components.cssには`.tab-nav > li > a`の宣言が2箇所ある。前半の * 「Bootstrap 3.4既定の見た目を再現する定義」がline-height:1.42857143を * 設定し、後半のlayout.scss由来の本来の定義（min-height/padding/border等） * はline-heightを指定していないため、前半の値がそのまま残る。 * これは「一般」バンドル（実物のBootstrapをimportするため、develop側も * 同じ1.42857143になる）向けには正しい再現だが、developの * directory.scssはBootstrapを一切importしないため、directory側の * `.tab-nav > li > a`はline-height未指定のままbody（1.65）から継承する。 * `revert`で打ち消し、継承値に戻す。 */ .tab-nav > li > a { line-height: revert; } /* * 2026-08-25: .input のline-height:1.42857143も同じ理由で打ち消す。 * components.cssの`.input`（Bootstrap defaults replica、font-size:14px時点 * のline-height:1.42857143）と、layout.scss由来の`.form-control`相当ルール * （font-size:16pxやmin-height:42px等を上書きするがline-heightは指定しない） * が両方効いており、line-heightだけ前者の値が残る。directory.scssの * `.form-control`ハンドコピー版もline-heightを指定しないため、developでは * body（1.65）から継承した値になる。 */ .input { line-height: revert; } /* * 2026-08-25: list/categoryページの検索フォーム見出し(.directory-search label) * が一覧ページ(index)より7px高い問題を打ち消す。 * ピクセル比較で.directory-search内の検索欄が一貫して7px下にずれることを * 確認した。.directory-search label { margin-bottom: 7px }自体は * layout.scssにも存在するが、developの実測ではこの余白が効いていない * （検索欄の位置が概ねlabelの行の高さ分だけ上に来る）。原因（別ルールでの * 打ち消し・マージン相殺等）を完全には特定できていないが、developの * スクリーンショットとのピクセル差分で実測した上でrevertにより一致させる。 */ .directory-search label { margin-bottom: revert; } /* * 2026-08-25: category.html.erb（1カテゴリの結果一覧）のh2 * (#category-results-title)がdevelopより高さが大きい問題を打ち消す。 * このh2はlayout.scss側に対応する専用ルールが一切無い、完全に無指定の * 素のh2で、developでは（directory.scssがBootstrapを一切importしない * ため）純粋なUA既定（font-size 1.5em・margin 0.83em等）になる。 * 現行はbase.cssの`@layer base`のBootstrap 3.4見出し既定値 * （font-size:30px・margin-top:20px・margin-bottom:10px・line-height:1.1等） * が一律適用されてしまうため、他のh2と違い対抗する`@layer components`側の * 個別指定が無く、`revert`ではなく`all: revert`で完全にUA既定へ戻す * （このh2を対象にした@layer componentsのルールが存在しないため、 * 素のCSSがレイヤーに常に勝つ仕様と衝突しない）。 */ .category-results > h2 { all: revert; }