/* ============================================================================ Singu-Link — タップ範囲・手応え・「話す」ボタン (touchability layer) ---------------------------------------------------------------------------- singu_theme.css の後に読み込む追加層。設定の「タップ範囲」() で 主要な“押す場所”を一括で拡縮し、押した時にひかえめな手応え（押し込み）を返す。 既定（standard）は倍率 1 ＝ 現状の見た目を一切変えない（標準ユーザーに回帰なし）。 配色・角丸はテーマ変数（var(--color-*) / --accent / --radius-*）を参照する＝全テーマ追従。 は layout のプリペイント inline script が CSS 適用前に載せてちらつき防止。 ============================================================================ */ /* 倍率：standard を 1（無変化）に、最小/コンパクトで締め、ゆったりで広げる */ :root { --tap-scale: 1; } html[data-touch="min"] { --tap-scale: .80; } html[data-touch="compact"] { --tap-scale: .90; } html[data-touch="standard"] { --tap-scale: 1; } html[data-touch="cozy"] { --tap-scale: 1.14; } /* タップ範囲設定のミニプレビュー（settings#show）。--tap-scale だけを参照するので、 appearance#choose が を書き換えた瞬間に追加 JS なしで即時反映する。 */ .touch-preview-btn { width: calc(2.75rem * var(--tap-scale)); height: calc(2.75rem * var(--tap-scale)); transition: width .15s ease, height .15s ease; } .touch-preview-btn svg { width: calc(1.25rem * var(--tap-scale)); height: calc(1.25rem * var(--tap-scale)); } /* 下のバー：親指で一番触る場所。アイコンと上下余白を倍率で拡縮 */ nav[class~="fixed"][class~="bottom-0"] a, nav[class~="fixed"][class~="bottom-0"] button[type="submit"] { padding-top: calc(0.5rem * var(--tap-scale)); padding-bottom: calc(0.5rem * var(--tap-scale)); } nav[class~="fixed"][class~="bottom-0"] svg.size-6 { width: calc(1.5rem * var(--tap-scale)); height: calc(1.5rem * var(--tap-scale)); } /* 右上のアイコン（検索・通知・設定など） */ header a svg.size-6, header button svg.size-6 { width: calc(1.5rem * var(--tap-scale)); height: calc(1.5rem * var(--tap-scale)); } /* いいねのハート（投稿の操作） */ [id$="_likes"] svg.size-6 { width: calc(1.5rem * var(--tap-scale)); height: calc(1.5rem * var(--tap-scale)); } /* ---- 押した時の手応え（ひかえめな押し込み。色は変えずスケールのみ） ---- */ @media (prefers-reduced-motion: no-preference) { nav[class~="fixed"][class~="bottom-0"] a svg.size-6, header a svg.size-6, header button svg.size-6, [id$="_likes"] button svg.size-6 { transition: transform .12s ease; } nav[class~="fixed"][class~="bottom-0"] a:active svg.size-6, header a:active svg.size-6, header button:active svg.size-6, [id$="_likes"] button:active svg.size-6 { transform: scale(.88); } } /* ============================================================ 「話す」フローティングボタン（compose_fab_controller） 親指で届く位置から、気軽に書き始められる入口。タイムラインのみに出る。 ============================================================ */ .singu-fab { position: fixed; right: 16px; z-index: 20; /* --fab-bottom-offset は nav-metrics（bottom_nav の実測高さ+余白）が上書きする。 JS 未実行時（初回ペイント・JS 無効環境）はフォールバックの固定式を使う。 ナビの実測高さには safe-area 分が既に含まれるため、両者を足し算せず置き換えにする。 */ bottom: var(--fab-bottom-offset, calc(env(safe-area-inset-bottom) + 76px)); display: inline-flex; align-items: center; gap: 8px; height: calc(3.4rem * var(--tap-scale)); padding: 0 calc(1.25rem * var(--tap-scale)) 0 calc(1rem * var(--tap-scale)); border: none; border-radius: 9999px; cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: .03em; background: var(--color-indigo-600); color: #fff; box-shadow: 0 14px 28px -10px color-mix(in srgb, var(--accent) 60%, transparent), 0 3px 8px rgba(0,0,0,.16); transition: transform .14s ease, filter .14s ease, box-shadow .14s ease; } .singu-fab svg { width: calc(1.3rem * var(--tap-scale)); height: calc(1.3rem * var(--tap-scale)); } .singu-fab:hover { filter: brightness(1.05); transform: translateY(-2px); } @media (prefers-reduced-motion: no-preference) { .singu-fab:active { transform: scale(.94); box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--accent) 60%, transparent); } } /* 角ばりテーマ（墨）では四角い影に */ html[data-theme="bold"] .singu-fab { border-radius: var(--radius-lg); box-shadow: 5px 5px 0 -1px color-mix(in srgb, var(--color-slate-900) 28%, transparent); } html[data-theme="bold"] .singu-fab:hover { transform: translate(-1px, -1px); } html[data-theme="bold"] .singu-fab:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 -1px color-mix(in srgb, var(--color-slate-900) 28%, transparent); } /* 夜テーマ：浮きを強める淡い縁 */ html[data-theme="night"] .singu-fab { box-shadow: 0 14px 30px -10px rgba(0,0,0,.7), 0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent); } /* 最小・コンパクトでは文字を省きアイコンだけの丸ボタンに（画面を圧迫しない） */ html[data-touch="min"] .singu-fab, html[data-touch="compact"] .singu-fab { padding: 0; width: calc(3.4rem * var(--tap-scale)); justify-content: center; } html[data-touch="min"] .singu-fab-label, html[data-touch="compact"] .singu-fab-label { display: none; } /* ---- 設定：タップ範囲セグメントの補足 ---- */ .seg button { font-size: 13px; } .touch-note { font-size: 11px; line-height: 1.6; color: var(--color-slate-400); margin: 9px 6px 0; }