/** * LightBox 専用CSS * * 流用元: 眼鏡工房レイ project の wwwroot/css/product-detail.css から * LightBox 関連セクションのみを抽出したもの。 * (D:\Works\眼鏡工房レイ\meganekoubourei.com\2.0\meganekoubourei2\meganekoubourei2) * * 対応JS: wwwroot/js/product-lightbox.js (そのまま流用・無改変) * モーダルHTML: Components/Shared/ProductLightbox.razor * * 注意: * - マークアップ/JS動的生成部分は Tailwind CSS v4 ユーティリティに依存する。 * Tailwind 導入時に tailwind.css へ次の1行を追加すること: * @source "../js/product-lightbox.js"; * (JSが動的生成するサムネイルのクラス h-14 w-[72px] bg-white/5 等を確実にビルドへ含めるため) * - 読み込みは App.razor の でグローバルに行う * ( 経由は Enhanced Navigation でスタイル消失するため禁止) */ /* ======================================== Tailwind 未導入/未ビルド時の保険 (初期非表示は Tailwind の hidden クラスに依存しているため、 ビルドが効くまでモーダルが見えてしまう事故を防ぐ) ======================================== */ #frame-lightbox.hidden { display: none !important; } /* ======================================== Enhanced Lightbox（高機能モーダル） ======================================== */ .frame-lightbox-overlay { /* z-index はモーダル HTML の Tailwind ユーティリティ z-[9999] と同値。Tailwind 未ビルド時でも 確実に全固定 UI（ヘッダー z-[1000] / 管理タグ z-[9998] 等）の上に来るよう CSS でも明示する。 併せて #frame-lightbox はレイアウト最上位（PublicLayout・ルート stacking context）に置くこと で、祖先の stacking context（例: 旧 @Body 内 div.relative.z-0）に閉じ込められないようにしている。 */ z-index: 9999; opacity: 0; visibility: hidden; transition: opacity 0.2s ease-out, visibility 0.2s ease-out; } .frame-lightbox-overlay.frame-lightbox-active { opacity: 1; visibility: visible; } /* Lightbox画像 - GPUアクセラレーション最適化 + アニメーション */ #frame-lightbox-image { pointer-events: none; max-width: none !important; max-height: none !important; touch-action: none; will-change: transform, width, height, opacity; transform-origin: 0 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; /* ふわっと表示アニメーション */ opacity: 0; filter: blur(4px); transition: opacity 0.25s ease-out, filter 0.25s ease-out; } #frame-lightbox-image.frame-image-loaded { opacity: 1; filter: blur(0); } /* ビューポート */ #frame-lightbox-viewport { cursor: grab; touch-action: none; /* レイヤー分離でパフォーマンス向上 */ isolation: isolate; } #frame-lightbox-viewport:active { cursor: grabbing; } /* ナビゲーターパネル */ #frame-navigator-panel { transition: opacity 0.2s ease; } #frame-navigator-thumb { transition: opacity 0.2s ease; } #frame-navigator-rect { transition: all 0.1s ease-out; } /* サムネイルストリップ - フィルムストリップ風デザイン */ [data-strip-index] { transition: all 0.15s ease; } /* サムネイルアイテム基本スタイル */ .lightbox-thumb-item { position: relative; overflow: hidden; /* 角を丸めない - シャープなエッジ */ border-radius: 0; } /* サムネイル画像 */ .lightbox-thumb-item img { transition: opacity 0.15s ease; } /* 選択インジケーター - 下部バー */ .lightbox-thumb-indicator { transform: scaleX(0); transform-origin: center; transition: transform 0.2s ease; } /* 選択中のサムネイル */ .lightbox-thumb-active { background-color: transparent !important; } .lightbox-thumb-active > div { background-color: rgba(255, 255, 255, 0.15) !important; } .lightbox-thumb-active img { opacity: 0.9 !important; } .lightbox-thumb-active .lightbox-thumb-indicator { transform: scaleX(1) !important; } /* ホバー効果 */ .lightbox-thumb-item:hover img { opacity: 0.7; } /* フォーカス時の白枠を完全に削除 */ .lightbox-thumb-item, .lightbox-thumb-item:focus, .lightbox-thumb-item:focus-visible, .lightbox-thumb-item:active { outline: none !important; box-shadow: none !important; border: none !important; } /* ボタンのデフォルトスタイルをリセット */ button.lightbox-thumb-item { -webkit-tap-highlight-color: transparent; } /* ツールバーボタン */ #frame-zoom-in-btn:disabled, #frame-zoom-out-btn:disabled { opacity: 0.3; cursor: not-allowed; } /* ナビゲーションボタンのホバー効果 */ [data-frame-lightbox-prev] > div, [data-frame-lightbox-next] > div { transition: all 0.2s ease; } /* キーボードショートカット表示 */ kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.75em; } /* ======================================== スクロールバー非表示ユーティリティ (モーダル内サムネイルトラックで使用) ======================================== */ .scrollbar-hide { scrollbar-width: none; -ms-overflow-style: none; } .scrollbar-hide::-webkit-scrollbar { display: none; } /* ======================================== レスポンシブ調整 ======================================== */ /* ビューポートのデフォルト(PC) */ .frame-lightbox-viewport { top: 70px; bottom: 60px; } /* PC - 複数画像時はサムネイルストリップ分の余白 */ .frame-lightbox-viewport.has-multiple-images { bottom: 130px; } /* スマホ用ビューポート */ @media (max-width: 640px) { /* モバイルではビューポート調整 - 新UI対応 */ /* 単一画像時: ズームコントロールパネル分 */ .frame-lightbox-viewport { top: 50px; bottom: 100px; } /* 複数画像時: サムネイルストリップ + ズームコントロール分 */ .frame-lightbox-viewport.has-multiple-images { bottom: 140px; } } /* タブレット */ @media (min-width: 641px) and (max-width: 1023px) { .frame-lightbox-viewport { top: 70px; bottom: 80px; } } /* スマホ用ズームボタンの無効状態 */ #frame-zoom-in-btn-mobile:disabled, #frame-zoom-out-btn-mobile:disabled { opacity: 0.3; cursor: not-allowed; } /* PC表示時はスマホ用UIを確実に非表示 */ @media (min-width: 640px) { #frame-lightbox-mobile-header { display: none !important; } } /* セーフエリア対応(iPhoneノッチ等) */ @supports (padding-bottom: env(safe-area-inset-bottom)) { .pb-safe { padding-bottom: env(safe-area-inset-bottom); } } /* ======================================== アクセシビリティ ======================================== */ @media (prefers-reduced-motion: reduce) { .frame-lightbox-overlay, #frame-lightbox-image, #frame-navigator-rect, [data-strip-index] { animation: none; transition: none; } } /* フォーカス表示 */ #frame-lightbox-close:focus, [data-frame-lightbox-prev]:focus, [data-frame-lightbox-next]:focus, [data-strip-index]:focus { outline: 2px solid white; outline-offset: 2px; } /* ======================================== ユーティリティ ======================================== */ /* タッチデバイスでのタップハイライト無効化 */ #frame-lightbox-close, #frame-lightbox-close-mobile, [data-frame-lightbox-prev], [data-frame-lightbox-next], [data-strip-index], [data-lightbox-strip-prev], [data-lightbox-strip-next], #frame-zoom-in-btn, #frame-zoom-out-btn, #frame-zoom-fit-btn, #frame-zoom-100-btn, #frame-zoom-in-btn-mobile, #frame-zoom-out-btn-mobile, #frame-zoom-fit-btn-mobile { -webkit-tap-highlight-color: transparent; } /* 画像のドラッグ防止(Lightbox用) */ #frame-lightbox-image { user-select: none; -webkit-user-drag: none; } /* サムネイルストリップのスクロールバー非表示 */ [data-strip-index] { scrollbar-width: none; } /* ======================================== Lightbox サムネイルストリップ矢印 ======================================== */ .lightbox-strip-container { position: relative; } .lightbox-strip-track { /* スクロールバー非表示（scrollbar-hideクラスと併用） */ -ms-overflow-style: none; scrollbar-width: none; } .lightbox-strip-track::-webkit-scrollbar { display: none; } /* 矢印ボタン共通スタイル */ .lightbox-strip-arrow { opacity: 0; transition: opacity 0.2s ease, background-color 0.2s ease; cursor: pointer; /* 背景を濃くして視認性向上 */ background: rgba(0, 0, 0, 0.7) !important; border-radius: 4px; /* 矢印を白くして見やすく */ color: white !important; } /* 矢印アイコンにドロップシャドウを追加 */ .lightbox-strip-arrow svg { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); stroke-width: 2.5; } /* ホバー時のスタイル */ .lightbox-strip-arrow:hover { background: rgba(0, 0, 0, 0.85) !important; color: white !important; } /* コンテナホバー時に矢印表示 */ .lightbox-strip-container:hover .lightbox-strip-arrow { opacity: 1; } /* スクロール可能な場合のみ矢印を表示 */ .lightbox-strip-arrow.hidden { display: none !important; } /* 左端/右端到達時の透明度 */ .lightbox-strip-arrow.at-edge { opacity: 0.3 !important; pointer-events: none; } /* タッチデバイスでは常に表示 */ @media (hover: none) { .lightbox-strip-arrow { opacity: 0.9; } .lightbox-strip-arrow.at-edge { opacity: 0.3 !important; } }