/* ---- カスタムプロパティ（調整箇所はここに集約） ----------------------- サイズ・色を変えたいときはこのブロックの値を変更すれば全体に反映される */ :root { --shh-bookmark-btn-size: 44px; /* ボタンの直径 */ --shh-bookmark-icon-size: 22px; /* アイコン（SVG）の幅・高さ */ --shh-bookmark-btn-offset: 10px; /* カード右上からのオフセット */ --shh-bookmark-color-inactive: #555; /* 未保存時のアイコン色 */ --shh-bookmark-color-active: #e8a13a; /* 保存済み時のアイコン色 */ --shh-bookmark-bg: rgba(255, 255, 255, 0.92); --shh-bookmark-bg-hover: #fff; --shh-bookmark-shadow: 0 2px 6px rgba(0, 0, 0, 0.18); --shh-bookmark-focus-ring: #4a90e2; } /* ボタン本体（カード右上にオーバーレイ配置） */ .shh-bookmark-btn { position: absolute; top: var(--shh-bookmark-btn-offset); right: var(--shh-bookmark-btn-offset); /* Total テーマのカルーセルナビ等が高い z-index を持つことがあるため、 確実に最前面に出るよう十分大きい値に */ z-index: 50; width: var(--shh-bookmark-btn-size); height: var(--shh-bookmark-btn-size); padding: 0; border: 0; border-radius: 50%; background: var(--shh-bookmark-bg); color: var(--shh-bookmark-color-inactive); cursor: pointer; box-shadow: var(--shh-bookmark-shadow); display: inline-flex; align-items: center; justify-content: center; transition: transform 0.15s ease, color 0.15s ease, background-color 0.15s ease; } .shh-bookmark-btn:hover { transform: scale(1.08); background: var(--shh-bookmark-bg-hover); } .shh-bookmark-btn:focus-visible { outline: 2px solid var(--shh-bookmark-focus-ring); outline-offset: 2px; } .shh-bookmark-btn svg { width: var(--shh-bookmark-icon-size); height: var(--shh-bookmark-icon-size); display: block; } /* 保存済み状態（塗りつぶし） */ .shh-bookmark-btn.is-active { color: var(--shh-bookmark-color-active); background: var(--shh-bookmark-bg-hover); } /* トースト（ 直下に append される。祖先 transform の影響を避けるため left/transform で中央寄せ + bottom 固定。fixed 包含ブロック対策） */ #shh-bookmark-toast { position: fixed; left: 50%; bottom: 24px; z-index: 99999; padding: 10px 18px; background: rgba(30, 30, 30, 0.92); color: #fff; font-size: 14px; line-height: 1.5; border-radius: 999px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(20px); transition: opacity 0.2s ease, transform 0.2s ease; } #shh-bookmark-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); } /* ===================================================================== ブックマーク一覧（[shh_bookmarks] ショートコード） ===================================================================== */ .shh-bookmarks-root { margin: 24px 0; } /* タブ列（一覧上部） */ .shh-bookmark-tabs { display: flex; gap: 0; border-bottom: 1px solid #ddd; margin-bottom: 16px; } .shh-bookmark-tab { flex: 1; padding: 12px 12px; border: 0; border-bottom: 3px solid transparent; background: transparent; cursor: pointer; font-size: 15px; color: #666; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: color 0.15s ease, border-color 0.15s ease; } .shh-bookmark-tab:hover { color: #333; } .shh-bookmark-tab:focus-visible { outline: 2px solid var(--shh-bookmark-focus-ring); outline-offset: -2px; } .shh-bookmark-tab.is-active { color: var(--shh-bookmark-color-active); border-bottom-color: var(--shh-bookmark-color-active); font-weight: 600; } .shh-bookmark-tab.is-empty { color: #aaa; } .shh-bookmark-tab-badge { display: inline-block; min-width: 22px; padding: 2px 8px; border-radius: 999px; background: #f0f0f0; color: #555; font-size: 12px; line-height: 1.4; text-align: center; } .shh-bookmark-tab.is-active .shh-bookmark-tab-badge { background: var(--shh-bookmark-color-active); color: #fff; } .shh-bookmark-tab.is-empty .shh-bookmark-tab-badge { background: #f0f0f0; color: #bbb; } .shh-bookmark-tab-panel[hidden] { display: none; } .shh-bookmark-empty, .shh-bookmark-loading, .shh-bookmark-error { padding: 32px 16px; text-align: center; color: #666; font-size: 15px; line-height: 1.6; } .shh-bookmark-error { color: #c0392b; } .shh-bookmark-list { display: grid; gap: 16px; } .shh-bookmark-item { position: relative; display: block; background: #fff; border: 1px solid #e6e6e6; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.15s ease; } .shh-bookmark-item:hover { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); } .shh-bookmark-item.is-removing { opacity: 0; transform: scale(0.96); } .shh-bookmark-item-link { display: flex; gap: 14px; padding: 12px; color: inherit; text-decoration: none; align-items: stretch; } .shh-bookmark-item-thumb { flex: 0 0 96px; width: 96px; height: 96px; border-radius: 8px; overflow: hidden; background: #f3f3f3; } .shh-bookmark-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .shh-bookmark-item-thumb--empty { background: #f3f3f3; } .shh-bookmark-item-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .shh-bookmark-item-title { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.4; color: #1a1a1a; } /* 開催日・募集締切（複数チップ並び） */ .shh-bookmark-item-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; } .shh-bookmark-item-meta-chip { display: inline-block; padding: 2px 8px; font-size: 12px; line-height: 1.5; color: #4a3f00; background: #fff4cc; border-radius: 999px; white-space: nowrap; } .shh-bookmark-item-excerpt { font-size: 13px; line-height: 1.5; color: #555; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .shh-bookmark-item-excerpt p { margin: 0; } /* 削除ボタン（ゴミ箱）。役割色として赤系 */ .shh-bookmark-item-remove { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.95); color: #c0392b; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); transition: background-color 0.15s ease, transform 0.15s ease; } .shh-bookmark-item-remove:hover { background: #fff; transform: scale(1.06); } .shh-bookmark-item-remove:focus-visible { outline: 2px solid #c0392b; outline-offset: 2px; } .shh-bookmark-item-remove svg { width: 18px; height: 18px; } /* スマホ向け: サムネイルを少し小さめに */ @media (max-width: 480px) { .shh-bookmark-item-link { gap: 10px; padding: 10px; } .shh-bookmark-item-thumb { flex: 0 0 76px; width: 76px; height: 76px; } .shh-bookmark-item-title { font-size: 14.5px; } .shh-bookmark-item-excerpt { font-size: 12.5px; } } /* ===================================================================== カスタム確認モーダル ===================================================================== */ .shh-bookmark-modal-overlay { position: fixed; /* 祖先 transform の影響を避けるため、inset:0 ではなく明示指定 */ top: 0; left: 0; width: 100vw; height: 100vh; z-index: 100000; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; opacity: 0; transition: opacity 0.15s ease; } .shh-bookmark-modal-overlay.is-visible { opacity: 1; } .shh-bookmark-modal { background: #fff; border-radius: 14px; padding: 22px 22px 18px; max-width: 360px; width: 100%; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); } .shh-bookmark-modal-title { margin: 0 0 18px; font-size: 16px; font-weight: 700; line-height: 1.5; color: #1a1a1a; text-align: center; } .shh-bookmark-modal-actions { display: flex; gap: 10px; justify-content: stretch; } .shh-bookmark-modal-btn { flex: 1 1 0; padding: 11px 16px; border: 0; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color 0.15s ease; } .shh-bookmark-modal-cancel { background: #ececec; color: #333; } .shh-bookmark-modal-cancel:hover { background: #dcdcdc; } .shh-bookmark-modal-confirm { background: #c0392b; color: #fff; } .shh-bookmark-modal-confirm:hover { background: #a93222; } .shh-bookmark-modal-btn:focus-visible { outline: 2px solid #4a90e2; outline-offset: 2px; }