opencode/picoclaw
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: add visible borders to tiles and skill cards for tap affordance

Browse source 
Tiles and skill items had secondary-bg background on secondary-bg
parent, making them invisible as buttons. Switch to bg background
with hint-color borders so they stand out as distinct tappable areas.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
dj-oyu 2026-02-22 06:29:51 +09:00
parent 50dbe97b13
commit 2e07e19ba9
1 changed files with 10 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
pkg/miniapp/static/index.html
View file

@ -171,20 +171,20 @@
/* Skills */ /* Skills */
.skill-item { .skill-item {
background: var(--secondary-bg); background: var(--bg);
border-radius: 12px; border-radius: 12px;
padding: 14px 14px 14px 16px; padding: 14px 14px 14px 16px;
margin-bottom: 8px; margin-bottom: 10px;
cursor: pointer; cursor: pointer;
transition: all 0.15s; transition: all 0.15s;
border-left: 3px solid var(--hint); border: 1.5px solid var(--hint);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
} }
.skill-item:active { transform: scale(0.97); } .skill-item:active { transform: scale(0.97); }
.skill-item.selected { border-left-color: var(--btn); background: color-mix(in srgb, var(--btn) 10%, var(--secondary-bg)); } .skill-item.selected { border-color: var(--btn); background: color-mix(in srgb, var(--btn) 8%, var(--bg)); }
.skill-body { flex: 1; min-width: 0; } .skill-body { flex: 1; min-width: 0; }
@ -212,7 +212,7 @@
.skill-arrow { .skill-arrow {
color: var(--hint); color: var(--hint);
font-size: 18px; font-size: 22px;
flex-shrink: 0; flex-shrink: 0;
transition: color 0.15s; transition: color 0.15s;
} }
@ -293,21 +293,22 @@
.cmd-tile { .cmd-tile {
padding: 16px 14px; padding: 16px 14px;
border-radius: 12px; border-radius: 12px;
border: none; border: 1.5px solid var(--hint);
background: var(--secondary-bg); background: var(--bg);
color: var(--text); color: var(--text);
font-size: 15px; font-size: 15px;
font-weight: 500; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: all 0.15s; transition: all 0.15s;
text-align: center; text-align: center;
} }
.cmd-tile:active { transform: scale(0.95); } .cmd-tile:active { transform: scale(0.95); background: var(--secondary-bg); }
.cmd-tile.sent { .cmd-tile.sent {
background: var(--btn); background: var(--btn);
color: var(--btn-text); color: var(--btn-text);
border-color: var(--btn);
transition: all 0.15s; transition: all 0.15s;
} }