mai
/
posimai-root
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(posimai-dev): icon-only Claude btn, slim scrollbar, move session badge to chat bar 

- Claude 開始 → bot icon only (32x32, same style as settings btn)
- xterm-viewport scrollbar: 4px, translucent violet, rounded
- session badge moved from header to chat bar left edge (mobile-friendly)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
posimai 2026-03-31 00:48:41 +09:00
parent 1a00108255
commit 170dfaa7e0
1 changed files with 17 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
posimai-dev/index.html
View File

@ -74,19 +74,20 @@
}
.status-badge.disconnected { background: rgba(239,68,68,0.12); color: #F87171; }
/* セッションバッジ（チャットバー内） */
.session-badge {
font-size: 10px; font-weight: 400; color: rgba(255,255,255,0.3);
font-family: monospace; display: none;
font-size: 10px; font-weight: 400; color: rgba(255,255,255,0.25);
font-family: monospace; display: none; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis; max-width: 180px;
}
.session-badge.visible { display: block; }
/* Claude開始ボタン */
/* Claude開始ボタン — アイコンのみ */
.claude-btn {
display: flex; align-items: center; gap: 6px;
padding: 5px 12px; border-radius: 8px; border: none; cursor: pointer;
width: 32px; height: 32px; border-radius: 8px; border: none; cursor: pointer;
background: var(--accent-dim); color: var(--accent);
font-size: 12px; font-weight: 500; font-family: Inter, sans-serif;
transition: background 0.15s;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; transition: background 0.15s;
}
.claude-btn:hover { background: rgba(167,139,250,0.25); }
@ -104,6 +105,12 @@
#terminal-container .xterm { height: 100%; }
#terminal-container .xterm-viewport { border-radius: 8px 8px 0 0; }
/* スクロールバー — 細く・半透明 */
.xterm-viewport::-webkit-scrollbar { width: 4px; }
.xterm-viewport::-webkit-scrollbar-track { background: transparent; }
.xterm-viewport::-webkit-scrollbar-thumb { background: rgba(167,139,250,0.25); border-radius: 2px; }
.xterm-viewport::-webkit-scrollbar-thumb:hover { background: rgba(167,139,250,0.5); }
/* ── Chat input bar ── */
.chat-bar {
display: flex;
@ -180,12 +187,10 @@
<div class="header-dot" aria-hidden="true"></div>
<span class="header-title">posimai-dev</span>
<span class="status-badge disconnected" id="statusBadge">接続中...</span>
<span class="session-badge" id="sessionBadge"></span>
</div>
<div class="header-right">
<button class="claude-btn" id="claudeBtn">
<i data-lucide="bot" style="width:13px;height:13px;stroke-width:1.75"></i>
Claude 開始
<button class="claude-btn" id="claudeBtn" aria-label="Claude 開始">
<i data-lucide="bot" style="width:15px;height:15px;stroke-width:1.75"></i>
</button>
<button class="icon-btn" id="settingsBtn" aria-label="設定" aria-expanded="false">
<i data-lucide="settings" style="width:18px;height:18px;stroke-width:1.5"></i>
@ -196,6 +201,7 @@
<div id="terminal-container"></div>
<div class="chat-bar">
<span class="session-badge" id="sessionBadge"></span>
<input
type="text"
class="chat-input"