/* ============================================================ c96_LiquidGlass.css — Liquid Glass × デジタル庁 overlay (dev only) Stage-2a スキン本体。c95_Claymorphic の「全面クレイ」を置き換え、 面を二分する: ・ガラス層 = 浮遊するクローム/操作層のみ (backdrop-filter blur + lensing rim + 上スペキュラ)。 ・不透明層 = コンテンツ + ドラッグ容器 (backdrop-filter / transform / filter は一切載せない)。 トークンは c90_ModernTheme の --mm-* を参照。読み込みは 末尾 (c90 → c91/c92 → c93 → c96)。等specificity は source order で勝つ。 ── ドラッグ安全性(鉄則) ────────────────────────────── .onGrab(position:absolute)は #divMain{position:relative} (c10_BaseStyle4.css:14)に解決される。backdrop-filter / transform / filter は包含ブロックを生成しゴーストを再親化 → overflow:hidden が クリップして壊す。よってドラッグ容器カード (.divCate1 / .divCate / .divCate2 / #divCate4 / .divMeta / .mmp-* #divTable / 行)には それらを 絶対に足さない。Apple 規則 (ガラスはコンテンツに載せない)と同時に満たされる。 Scope: dev.music-manager.jp admin + dashboard + login + maintenance。 Excluded: analyzer ページ(独自ダーク、c90/c96 を読まない)。 c95_Claymorphic.css は残置(差替1行で即ロールバック)。 ============================================================ */ /* ---- A. ローカルトークン ---- */ :root{ /* 2b: sticky list ヘッダは固定トップバー(top 16 + height 64)の下に止める。 旧 nav-height(52, 横バー)から固定 64px トップバー基準へ reconcile。 = topbar-h(64) + 上インセット(16) + ガター(8) = 88px。 */ --mm-sticky-top: calc(var(--mm-topbar-h) + var(--mm-space-3) + var(--mm-space-2)); } /* ============================================================ B. ページ背景 — フラット単色(issue #27)。旧デジタル庁ブルーの グラデ下地を廃し、c90-B の background-color を素の面色に戻す。 ============================================================ */ body{ background-color: var(--mm-page-bg); } /* ============================================================ C. ナビバー — FLAT chrome(issue #27)。ガラス(backdrop-filter + lensing rim)を廃し、不透明白面 + 1px ヘアライン + 柔らかい drop に。 ============================================================ */ #mmNav, #mmAdminNav{ background-color: var(--mm-surface); border: 1px solid var(--mm-border); box-shadow: var(--mm-shadow); } /* ============================================================ D. トップバー(ユーザー) — FLAT chrome。管理バー (#divTop:has(#divTopLine))は c90-C が navy 帯なので触らない。 ============================================================ */ #divTop:has(.divLanguage){ background-color: var(--mm-surface); border: 1px solid var(--mm-border); box-shadow: var(--mm-shadow); } /* ============================================================ E. カード & ログインカード — OPAQUE 不透明面 + ニュートラル Elevation + ヘアライン。ガラスは載せない(Apple: コンテンツにガラス禁止)。 ============================================================ */ #divReturn > div, #divLayout1st .divArea, #divLayout2nd .divArea, #divAreas .divArea, #divLoginForgot{ background-color: var(--mm-surface); border-color: var(--mm-hairline); border-radius: var(--mm-radius-lg); box-shadow: var(--mm-elev-1); } /* ホバー — 集約カードのみ。lift(transform)は廃止(クレイの所作)。 border/影の微変化に留め、ドラッグ容器を再親化しない。 */ #divLayout1st .divArea, #divLayout2nd .divArea, #divAreas .divArea{ transition: box-shadow var(--mm-dur) var(--mm-ease), border-color var(--mm-dur) var(--mm-ease); } #divLayout1st .divArea:hover, #divLayout2nd .divArea:hover, #divAreas .divArea:hover{ border-color: var(--mm-accent); box-shadow: var(--mm-elev-2); } /* ログインカード内の見出し帯 — GLASS(上部アクション帯のみ)。本体は不透明(E)。 */ #divLoginTitle{ background-color: var(--mm-accent); -webkit-backdrop-filter: blur(var(--mm-glass-blur)) saturate(160%); backdrop-filter: blur(var(--mm-glass-blur)) saturate(160%); box-shadow: var(--mm-glass-rim), var(--mm-elev-2); } #divForgotTitle{ background-color: var(--mm-accent-deep); -webkit-backdrop-filter: blur(var(--mm-glass-blur)) saturate(160%); backdrop-filter: blur(var(--mm-glass-blur)) saturate(160%); box-shadow: var(--mm-glass-rim), var(--mm-elev-2); } /* アラート — 暖色(c90-D)は維持し、淡 Elevation だけ付与 */ .divAlert{ box-shadow: var(--mm-elev-1); } /* ============================================================ F. カプセル形状 + プライマリボタン。 border-radius は paint-only でレイアウト不変。 ============================================================ */ /* issue #27 stage②: 通常ボタン/セレクトは 9px。カプセルはログアウト ボタンと状態チップ/ページャのみ(spec: pill only for logout). */ .btnNormal, .btnNormalSquare, .btnLargeSquare, #slctLanguage, input[type="file"]::file-selector-button{ border-radius: var(--mm-radius-sm); } #btnLogout{ border-radius: var(--mm-radius-pill); } /* ソフト状態チップ → フルカプセル */ .spnRed, .spnPink, .spnOrange, .spnGreen, .spnBlue, .spnGray, .spnWait, .spnRetry, .spnChild{ border-radius: var(--mm-radius-pill); } /* ページャ + 現在ページ */ #divPagesValue > a, #divPagesValue > div > a, #divPageUnit > a, #divPagesValue > span.spnBlue, #divPagesValue > div > span.spnBlue, #divPageUnit > span.spnBlue{ border-radius: var(--mm-radius-pill); } /* フォーカスリングもコントロール角丸に沿わせる */ .btnNormal:focus-visible, .btnNormalSquare:focus-visible, .btnLargeSquare:focus-visible, #slctLanguage:focus-visible{ border-radius: var(--mm-radius-sm); } #btnLogout:focus-visible{ border-radius: var(--mm-radius-pill); } /* プライマリボタン — accent glass(押下で着色、lift しない)。 .btnNormal の elev(c90-E)を source order で上書き。 */ .BgcClrCorp, .BgcClrCorpHover{ box-shadow: var(--mm-btn-primary-shadow); } .BgcClrCorpHover:hover{ box-shadow: var(--mm-btn-primary-shadow); background-color: var(--mm-accent-hover); } .BgcClrCorp:active, .BgcClrCorpHover:active{ background-color: var(--mm-accent-active); } /* ============================================================ G. Sticky リストヘッダ — GLASS chrome。c90-O1 の深ブルー不透明バーに ガラスの blur + lensing rim を載せ、固定時に浮いて見せる。 ============================================================ */ #divTable > div:has(> #divColItem), #divTable > div:has(> #divColItem_meta), #divTable > #divTableTitle ~ #divColItem, #divMetaData > .divRowCol{ -webkit-backdrop-filter: blur(var(--mm-glass-blur)) saturate(160%); backdrop-filter: blur(var(--mm-glass-blur)) saturate(160%); box-shadow: var(--mm-glass-rim), var(--mm-elev-2); } /* ============================================================ H. Sticky list ヘッダのオフセット reconcile(2b 固定トップバー基準)。 旧 c95 H1/H2 は nav 自体を position:sticky にしていたが、2b では nav は c91/c92 で position:fixed(out of flow)。c96 は c91/c92 の後に 読まれるため、ここで nav を sticky にすると固定シェルを壊す → nav-sticky の上書きは撤去する。 固定トップバーは全幅(>=601)で top に居続けるので、sticky リスト ヘッダはデスクトップでトップバー下(--mm-sticky-top, 88px)に止める。 モバイル(<=600)は nav が in-flow・トップバー static なので c93 の top:0 を維持(オフセットしない)。c93 は無編集。 ============================================================ */ @media screen and (min-width: 601px){ #divTable > div:has(> #divColItem), #divTable > div:has(> #divColItem_meta), #divTable > #divTableTitle ~ #divColItem, #divMetaData > .divRowCol{ top: var(--mm-sticky-top, 88px); } } /* ============================================================ J. メタ詳細・フォームカード — OPAQUE 不透明面(ガラス禁止)。 ★ドラッグ容器(.divCate1 / .divCate / .divCate2 / #divCate4 / .divMeta)に backdrop-filter / position / transform / filter を絶対に足さない。 ============================================================ */ /* J1. meta_overview (cm04) — グループカード */ #divCate4, #divPack, #divCate3_1{ background-color: var(--mm-surface); border-color: var(--mm-hairline); border-radius: var(--mm-radius); box-shadow: var(--mm-elev-2); overflow: hidden; } /* disc = cate2(上,角丸top) + cate1(下,角丸bottom) で 1 枚のカード。 クレイのインセット白スペキュラは廃止し、不透明面 + ヘアラインに。 */ .divCate2, .divCate2_fix{ background-color: var(--mm-surface-sunken); border-color: var(--mm-hairline); border-radius: var(--mm-radius) var(--mm-radius) 0 0; overflow: hidden; } .divCate1{ background-color: var(--mm-surface); border-color: var(--mm-hairline); border-radius: 0 0 var(--mm-radius) var(--mm-radius); box-shadow: var(--mm-elev-1); overflow: hidden; /* ghost escapes (CB = #divMain) */ } /* J2. meta_data form (cm05) — 各 .divMeta をカード化(背景は据置=開閉維持) */ .divMeta{ border: 1px solid var(--mm-hairline); border-radius: var(--mm-radius-sm); box-shadow: var(--mm-elev-1); overflow: hidden; } .divMetaSpaceHead{ height: 20px; } /* カード化で空く間隔を詰める */ /* J3. meta setin edit (ca91) */ .divCate{ background-color: var(--mm-surface); border: 1px solid var(--mm-hairline); border-radius: var(--mm-radius); box-shadow: var(--mm-elev-1); overflow: hidden; } /* J4. meta setin assign (ca92 list / ca93 edit) */ #divDefaultAssign, #divDefaultType{ background-color: var(--mm-surface); border: 1px solid var(--mm-hairline); border-radius: var(--mm-radius); box-shadow: var(--mm-elev-1); overflow: hidden; } #divTargetTitle{ /* グレー見出しを維持(上半分) */ border-color: var(--mm-hairline); border-radius: var(--mm-radius) var(--mm-radius) 0 0; overflow: hidden; } #divTargetContent{ background-color: var(--mm-surface); border-color: var(--mm-hairline); border-radius: 0 0 var(--mm-radius) var(--mm-radius); box-shadow: var(--mm-elev-1); overflow: hidden; } /* ============================================================ K. 一覧のフィルタ/ページャ + インフォボックス — GLASS chrome (フィルタ/ページャは浮遊する操作帯)。#divFilter は overflow させない (ネイティブ select/日付ポップアップ用)。#divInfoText は status 色の fill を維持し枠だけ付与(不透明)。 ============================================================ */ #divTable #divFilter{ background-color: var(--mm-glass-bg); -webkit-backdrop-filter: blur(var(--mm-glass-blur)) saturate(160%); backdrop-filter: blur(var(--mm-glass-blur)) saturate(160%); border: 1px solid var(--mm-hairline); border-radius: var(--mm-radius); box-shadow: var(--mm-glass-rim), var(--mm-elev-1); } #divTable #divPages{ background-color: var(--mm-glass-bg); -webkit-backdrop-filter: blur(var(--mm-glass-blur)) saturate(160%); backdrop-filter: blur(var(--mm-glass-blur)) saturate(160%); border: 1px solid var(--mm-hairline); border-radius: var(--mm-radius); box-shadow: var(--mm-glass-rim), var(--mm-elev-1); overflow: hidden; } #divInfoText{ border: 1px solid var(--mm-hairline); border-radius: var(--mm-radius); box-shadow: var(--mm-elev-1); } /* ============================================================ L. アカウント/フォーム系 #divTable カード — OPAQUE 不透明面。 body の page-class でオプトイン(9 セレクタ)。ドラッグ無し検証済み だが Apple 規則(コンテンツにガラス禁止)に合わせ不透明で統一。 ============================================================ */ .mmp-admin_accounts_id #divTable, /* admin account 詳細/編集 (a17) */ .mmp-accounts_id #divTable, /* 権利者 account 編集 (a23) */ .mmp-admin_accounts_new #divTable, /* admin account 新規 (a15) */ .mmp-accounts_new #divTable, /* 新規ユーザー (a20) */ .mmp-mail_template #divTable, /* メールテンプレ (a06) */ .mmp-reports_mail #divTable, /* レポートメール (a25) */ .mmp-setting_mails_send #divTable, /* 一斉メール送信 (a75) */ .mmp-account #divTable, /* ダッシュボード account (u20) */ .mmp-payment #divTable{ /* ダッシュボード payment (u40) */ background-color: var(--mm-surface); border: 1px solid var(--mm-hairline); border-radius: var(--mm-radius); box-shadow: var(--mm-elev-1); overflow: hidden; } /* ============================================================ I. アクセシビリティ(透明ガラスが復活したので 3 分岐を新設)。 ============================================================ */ /* 1) reduced transparency → ガラスを不透明白 + blur 0 に。 */ @media (prefers-reduced-transparency: reduce){ #mmNav, #mmAdminNav, #divTop:has(.divLanguage), #divLoginTitle, #divForgotTitle, #divTable > div:has(> #divColItem), #divTable > div:has(> #divColItem_meta), #divTable > #divTableTitle ~ #divColItem, #divMetaData > .divRowCol, #divTable #divFilter, #divTable #divPages{ -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--mm-elev-2); } #mmNav, #mmAdminNav, #divTop:has(.divLanguage), #divTable #divFilter, #divTable #divPages{ background-color: #ffffff; } } /* 2) more contrast → 純白塗り + ≥3:1 罫(リム強化では不足)。 */ @media (prefers-contrast: more){ :root{ --mm-hairline: rgba(20,30,60,.42); --mm-hairline-strong: rgba(20,30,60,.58); --mm-border: rgba(20,30,60,.42); --mm-border-strong: rgba(20,30,60,.58); } #mmNav, #mmAdminNav, #divTop:has(.divLanguage), #divTable #divFilter, #divTable #divPages{ background-color: #ffffff; -webkit-backdrop-filter: none; backdrop-filter: none; } #divReturn > div, #divLayout1st .divArea, #divLayout2nd .divArea, #divAreas .divArea, #divLoginForgot, #divCate4, #divPack, #divCate3_1, .divCate2, .divCate2_fix, .divCate1, .divMeta, .divCate, #divDefaultAssign, #divDefaultType, #divTargetTitle, #divTargetContent, #divTable #divFilter, #divTable #divPages, #divInfoText, .mmp-admin_accounts_id #divTable, .mmp-accounts_id #divTable, .mmp-admin_accounts_new #divTable, .mmp-accounts_new #divTable, .mmp-mail_template #divTable, .mmp-reports_mail #divTable, .mmp-setting_mails_send #divTable, .mmp-account #divTable, .mmp-payment #divTable{ border: 1px solid var(--mm-border-strong); } } /* 3) reduced motion → morph/bloom/遷移を停止。 */ @media (prefers-reduced-motion: reduce){ #divLayout1st .divArea, #divLayout2nd .divArea, #divAreas .divArea{ transition: none; } }