From 396d4d24a8f4010c93f0184fb1144d75e1f9c880 Mon Sep 17 00:00:00 2001 From: dj-oyu <68707227+dj-oyu@users.noreply.github.com> Date: Sun, 22 Feb 2026 06:54:32 +0900 Subject: [PATCH] feat: add raised button effect with gradient and shadow MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- pkg/miniapp/static/index.html | 40 +++++++++++++++++++++++------------ 1 file changed, 27 insertions(+), 13 deletions(-) diff --git a/pkg/miniapp/static/index.html b/pkg/miniapp/static/index.html index aa722e737..204e4a0b0 100644 --- a/pkg/miniapp/static/index.html +++ b/pkg/miniapp/static/index.html @@ -183,20 +183,24 @@ /* Skills */ .skill-item { - background: var(--bg); + background: linear-gradient(to bottom, var(--bg), var(--secondary-bg)); border-radius: 12px; padding: 14px 14px 14px 16px; margin-bottom: 10px; cursor: pointer; - transition: all 0.15s; - border: 1.5px solid var(--hint); + transition: all 0.12s; + border: 1px solid var(--hint); display: flex; align-items: center; 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.selected { border-color: var(--btn); } + .skill-item:active { + 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; } @@ -305,22 +309,28 @@ .cmd-tile { padding: 16px 14px; border-radius: 12px; - border: 1.5px solid var(--hint); - background: var(--bg); + border: 1px solid var(--hint); + background: linear-gradient(to bottom, var(--bg), var(--secondary-bg)); color: var(--text); font-size: 15px; font-weight: 600; cursor: pointer; - transition: all 0.15s; + transition: all 0.12s; 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 { background: var(--btn); color: var(--btn-text); border-color: var(--btn); + box-shadow: 0 2px 4px rgba(0,0,0,0.15); transition: all 0.15s; } @@ -329,16 +339,20 @@ width: 100%; padding: 12px 16px; border-radius: 12px; - border: none; - background: var(--secondary-bg); + border: 1px solid var(--hint); + background: linear-gradient(to bottom, var(--bg), var(--secondary-bg)); color: var(--hint); font-size: 14px; cursor: pointer; 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); + }