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

fix: increase border contrast on interactive elements for tap affordance

Browse source 
Add --glass-border-interactive with higher opacity for tappable
elements (tiles, skills, steps, inputs, refresh) while keeping
subtle --glass-border for passive containers like cards.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
dj-oyu 2026-02-22 08:20:14 +09:00
parent a72d7bf456
commit 577310891f
1 changed files with 9 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -19,7 +19,8 @@
--pending-phase: var(--hint); --pending-phase: var(--hint);
/* Liquid Glass */ /* Liquid Glass */
--glass-bg: rgba(255, 255, 255, 0.55); --glass-bg: rgba(255, 255, 255, 0.55);
--glass-border: rgba(255, 255, 255, 0.7); --glass-border: rgba(0, 0, 0, 0.08);
--glass-border-interactive: rgba(0, 0, 0, 0.15);
--glass-shadow: rgba(0, 0, 0, 0.06); --glass-shadow: rgba(0, 0, 0, 0.06);
--glass-divider: rgba(0, 0, 0, 0.06); --glass-divider: rgba(0, 0, 0, 0.06);
--tab-bar-bg: rgba(255, 255, 255, 0.72); --tab-bar-bg: rgba(255, 255, 255, 0.72);
@ -38,7 +39,8 @@
--secondary-bg: var(--tg-theme-secondary-bg-color, #2c2c2e); --secondary-bg: var(--tg-theme-secondary-bg-color, #2c2c2e);
/* Liquid Glass — dark */ /* Liquid Glass — dark */
--glass-bg: rgba(255, 255, 255, 0.08); --glass-bg: rgba(255, 255, 255, 0.08);
--glass-border: rgba(255, 255, 255, 0.12); --glass-border: rgba(255, 255, 255, 0.1);
--glass-border-interactive: rgba(255, 255, 255, 0.22);
--glass-shadow: rgba(0, 0, 0, 0.2); --glass-shadow: rgba(0, 0, 0, 0.2);
--glass-divider: rgba(255, 255, 255, 0.08); --glass-divider: rgba(255, 255, 255, 0.08);
--tab-bar-bg: rgba(28, 28, 30, 0.72); --tab-bar-bg: rgba(28, 28, 30, 0.72);
@ -192,7 +194,7 @@
.step:active { transform: scale(0.97); } .step:active { transform: scale(0.97); }
.step:not(.step-done) { .step:not(.step-done) {
background: var(--glass-bg); background: var(--glass-bg);
border: 1px solid var(--glass-border); border: 1px solid var(--glass-border-interactive);
box-shadow: 0 0.5px 2px var(--glass-shadow); box-shadow: 0 0.5px 2px var(--glass-shadow);
} }
@ -243,7 +245,7 @@
margin-bottom: 10px; margin-bottom: 10px;
cursor: pointer; cursor: pointer;
transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.2s, border-color 0.2s; transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.2s, border-color 0.2s;
border: 1px solid var(--glass-border); border: 1px solid var(--glass-border-interactive);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
@ -325,7 +327,7 @@
flex: 1; flex: 1;
padding: 10px 16px; padding: 10px 16px;
border-radius: 20px; border-radius: 20px;
border: 1px solid var(--glass-border); border: 1px solid var(--glass-border-interactive);
background: var(--glass-bg); background: var(--glass-bg);
color: var(--text); color: var(--text);
font-size: 14px; font-size: 14px;
@ -377,7 +379,7 @@
.cmd-tile { .cmd-tile {
padding: 16px 14px; padding: 16px 14px;
border-radius: 14px; border-radius: 14px;
border: 1px solid var(--glass-border); border: 1px solid var(--glass-border-interactive);
background: var(--glass-bg); background: var(--glass-bg);
color: var(--text); color: var(--text);
font-size: 15px; font-size: 15px;
@ -406,7 +408,7 @@
width: 100%; width: 100%;
padding: 12px 16px; padding: 12px 16px;
border-radius: 14px; border-radius: 14px;
border: 1px solid var(--glass-border); border: 1px solid var(--glass-border-interactive);
background: var(--glass-bg); background: var(--glass-bg);
color: var(--text); color: var(--text);
font-size: 14px; font-size: 14px;