feat: add .btn-icon CSS class for compact icon buttons

This commit is contained in:
tian 2026-05-08 11:43:33 +08:00
parent 3025175db5
commit c816a7b99d
2 changed files with 3 additions and 2 deletions

View File

@ -170,6 +170,7 @@ main{padding:24px 28px 36px;max-width:1440px}
.btn,button,input,select,textarea{font:inherit}
.btn,button{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:5px 10px;border-radius:var(--radius);border:1px solid var(--border-strong);background:var(--button-soft);color:var(--button-soft-text);cursor:pointer;font-size:11px;font-weight:500;line-height:1.15;min-height:30px;transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease}
.btn-icon{padding:0;width:22px;height:22px;min-height:auto;gap:0;border-radius:3px}
.btn:hover,button:hover{background:var(--button-soft-hover);border-color:#c3ccd6}
.btn.primary,button.primary{background:var(--primary-strong);border-color:var(--primary-strong);color:#f8fafc}
.btn.primary:hover,button.primary:hover{background:var(--primary-strong-hover);border-color:var(--primary-strong-hover)}

View File

@ -35,10 +35,10 @@
<div style="margin-top:6px;display:flex;justify-content:space-between;align-items:center">
<div><span style="font-weight:500;font-size:13px">{{.Name}}</span> <span class="muted small">{{.PhotoCount}}张</span></div>
<div class="actions compact" style="gap:2px">
<button class="btn ghost" type="button" style="font-size:12px;padding:0;width:22px;height:22px;min-height:auto;gap:0" title="编辑" onclick="showEdit({{.ID}},'{{.Name}}',[{{range $i,$p := .Photos}}{{if $i}},{{end}}'/ui/face-photo/{{$p}}'{{end}}])">&#9998;</button>
<button class="btn ghost btn-icon" type="button" title="编辑" onclick="showEdit({{.ID}},'{{.Name}}',[{{range $i,$p := .Photos}}{{if $i}},{{end}}'/ui/face-photo/{{$p}}'{{end}}])">&#9998;</button>
<form method="post" action="/ui/face-gallery/delete" style="display:inline" onsubmit="return confirm('确定删除 {{.Name}}')">
<input type="hidden" name="id" value="{{.ID}}">
<button class="btn ghost" type="submit" style="color:var(--danger-soft-text);font-size:12px;padding:0;width:22px;height:22px;min-height:auto;gap:0" title="删除">&#10005;</button>
<button class="btn ghost btn-icon" type="submit" style="color:var(--danger-soft-text)" title="删除">&#10005;</button>
</form>
</div>
</div>