@takagaki/cortex-decisions-viewer 0.12.25 → 0.12.26

package/dist/render.js

@@ -2271,31 +2271,38 @@ a:hover { text-decoration: underline; }
    丸・cover・未設定は薄い青地に案件名の頭文字1字。同じ画像が2つの画面で
    別の切れ方をすると「設定したのと違う絵が出ている」と読まれる */
 .site-icon-slot { position: relative; flex: 0 0 auto; display: flex; align-items: center; }
+/* 大きさは案件名（18px・太字）の文字の高さに揃える（0.12.25 の 28px はオーナー実機で
+   「小さくて見にくい」）。**丸は overflow: hidden にしない**——右下の「＋」バッジを
+   丸の外へ少しはみ出させるため。画像側（.site-icon-img）を丸く切る */
 .site-icon {
   position: relative;
-  width: 28px; height: 28px; border-radius: 50%; overflow: hidden;
+  width: 36px; height: 36px; border-radius: 50%;
   display: flex; align-items: center; justify-content: center;
   padding: 0; border: 0; background: var(--accent-weak); color: var(--accent);
-  font-size: 13px; font-weight: 600; line-height: 1;
+  font-size: 16px; font-weight: 600; line-height: 1;
 }
+/* **未設定は頭文字をはっきり出す**（ポータルの一覧カードの頭文字の丸と同じ見た目・薄くしない）。
+   0.12.25 の「薄い頭文字＋大きな＋」はオーナー実機で「＋だけの丸に見えて頭文字が読めない」 */
 .site-icon-initial {
   display: flex; align-items: center; justify-content: center;
-  width: 100%; height: 100%;
+  width: 100%; height: 100%; border-radius: 50%;
 }
-/* **押せる丸の頭文字だけ薄くして、上に「＋」を重ねる。**
-   頭文字だけだと「設定済みの何か」に見え、置ける場所だと分からない
-   ——薄い字の上の「＋」で「ここに画像を置ける」を一目にする。
-   受け口が無い案件（span.site-icon）は置けないので、薄くも「＋」も付けない */
-button.site-icon .site-icon-initial { opacity: .45; }
+/* **「＋」はホバー時だけ、右下に小さく重ねる**（常時は出さない）。
+   受け口が無い案件（span.site-icon）には付かない（置けない口に誘いを出さない） */
 .site-icon-plus {
-  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
+  position: absolute; right: -2px; bottom: -2px;
+  width: 16px; height: 16px; border-radius: 50%;
   display: flex; align-items: center; justify-content: center;
-  color: var(--accent); font-size: 16px; font-weight: 700; line-height: 1;
+  background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; line-height: 1;
+  box-shadow: 0 0 0 2px #fff;
+  opacity: 0; transition: opacity 0.12s ease;
 }
+button.site-icon:hover .site-icon-plus,
+button.site-icon[aria-expanded="true"] .site-icon-plus { opacity: 1; }
 /* 設定済みの丸は画像だけ。**押せることはホバーで出す**——常時ラベルを重ねると
    選んだロゴが読めなくなる（アイコンを設定した意味が薄れる） */
 .site-icon-hover {
-  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
+  position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%;
   display: flex; align-items: center; justify-content: center;
   background: rgba(0, 0, 0, 0.55); color: #fff;
   font-size: 11px; font-weight: 600; line-height: 1;
@@ -2307,11 +2314,11 @@ button.site-icon[aria-expanded="true"] .site-icon-hover { opacity: 1; }
    ——押せない丸に指差しカーソルやリングを出すのが、画面の嘘のうちで一番たちが悪い */
 button.site-icon { cursor: pointer; }
 button.site-icon:hover, button.site-icon[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--accent); }
-.site-icon-img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.site-icon-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
 /* 丸を押したときだけ出るメニュー。スロットを基準に浮かせる（ヘッダーは sticky なので
    ページを送っても位置がずれない） */
 .site-icon-menu {
-  position: absolute; top: 36px; left: 0; z-index: 30; min-width: 220px;
+  position: absolute; top: 44px; left: 0; z-index: 30; min-width: 220px;
   background: #fff; border: 1px solid var(--border); border-radius: 10px;
   box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 8px;
   display: flex; flex-direction: column; gap: 6px;
@@ -4499,8 +4506,8 @@ ${deriveCapTile.toString()}
       if (intake) circle.appendChild(el("span", { class: "site-icon-hover", "aria-hidden": "true", text: "変更" }));
     } else {
       circle.appendChild(siteIconInitialEl());
-      // **未設定の押せる丸には「＋」を重ねる。** 薄い頭文字だけだと
-      // 「設定済みの何か」に見えて、置ける場所だと分からない
+      // **未設定の押せる丸には、ホバー時だけ右下に小さく「＋」を出す**（CSS の opacity）。
+      // 頭文字ははっきり出す——0.12.25 の「薄い頭文字＋大きな＋」は「＋だけの丸」に見えた
       if (intake) circle.appendChild(el("span", { class: "site-icon-plus", "aria-hidden": "true", text: "＋" }));
     }
     slot.appendChild(circle);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@takagaki/cortex-decisions-viewer",
-  "version": "0.12.25",
+  "version": "0.12.26",
   "description": "Cortexの意思決定記録（Decisions/*.md）を静的サイトにビルドして閲覧する。各レコードに「Edit on GitHub」リンクを付与する。",
   "license": "UNLICENSED",
   "private": false,