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

feat: add raised button effect with gradient and shadow

Browse source 
- Gradient background (bg → secondary-bg) gives depth
- box-shadow lifts elements off the surface
- Press: shadow disappears + translateY(1px) for physical push feel
- Applied to: command tiles, skill cards, refresh button

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
dj-oyu 2026-02-22 06:54:32 +09:00
parent 89b7314181
commit 396d4d24a8
1 changed files with 27 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -183,20 +183,24 @@
/* Skills */ /* Skills */
.skill-item { .skill-item {
background: var(--bg); background: linear-gradient(to bottom, var(--bg), var(--secondary-bg));
border-radius: 12px; border-radius: 12px;
padding: 14px 14px 14px 16px; padding: 14px 14px 14px 16px;
margin-bottom: 10px; margin-bottom: 10px;
cursor: pointer; cursor: pointer;
transition: all 0.15s; transition: all 0.12s;
border: 1.5px solid var(--hint); border: 1px solid var(--hint);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
box-shadow: 0 2px 4px rgba(0,0,0,0.08), 0 1px 0 rgba(255,255,255,0.06) inset;
} }
.skill-item:active { transform: scale(0.97); } .skill-item:active {
.skill-item.selected { border-color: var(--btn); } transform: scale(0.98) translateY(1px);
box-shadow: 0 0 2px rgba(0,0,0,0.06);
}
.skill-item.selected { border-color: var(--btn); box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
.skill-body { flex: 1; min-width: 0; } .skill-body { flex: 1; min-width: 0; }
@ -305,22 +309,28 @@
.cmd-tile { .cmd-tile {
padding: 16px 14px; padding: 16px 14px;
border-radius: 12px; border-radius: 12px;
border: 1.5px solid var(--hint); border: 1px solid var(--hint);
background: var(--bg); background: linear-gradient(to bottom, var(--bg), var(--secondary-bg));
color: var(--text); color: var(--text);
font-size: 15px; font-size: 15px;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: all 0.15s; transition: all 0.12s;
text-align: center; text-align: center;
box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 1px 0 rgba(255,255,255,0.06) inset;
} }
.cmd-tile:active { transform: scale(0.95); background: var(--secondary-bg); } .cmd-tile:active {
transform: scale(0.96) translateY(1px);
box-shadow: 0 0 2px rgba(0,0,0,0.08);
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); border-color: var(--btn);
box-shadow: 0 2px 4px rgba(0,0,0,0.15);
transition: all 0.15s; transition: all 0.15s;
} }
@ -329,16 +339,20 @@
width: 100%; width: 100%;
padding: 12px 16px; padding: 12px 16px;
border-radius: 12px; border-radius: 12px;
border: none; border: 1px solid var(--hint);
background: var(--secondary-bg); background: linear-gradient(to bottom, var(--bg), var(--secondary-bg));
color: var(--hint); color: var(--hint);
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
margin-top: 8px; margin-top: 8px;
transition: all 0.15s; transition: all 0.12s;
box-shadow: 0 2px 4px rgba(0,0,0,0.08);
} }
.refresh-btn:active { transform: scale(0.97); } .refresh-btn:active {
transform: scale(0.98) translateY(1px);
box-shadow: 0 0 2px rgba(0,0,0,0.06);
}
</style> </style>
</head> </head>
<body> <body>