fix(ui): smaller icons, aspect-ratio cards, max 4 cols, 2col mobile

This commit is contained in:
Claus Lohmar 2026-06-14 17:51:00 +00:00
parent 2579715cbc
commit a4163b6595
2 changed files with 12 additions and 13 deletions

View file

@ -119,30 +119,29 @@ templ workspaceCSS() {
.app-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:12px
gap:10px
}
@media(min-width:600px){.app-grid{grid-template-columns:repeat(3,1fr);gap:14px}}
@media(min-width:900px){.app-grid{grid-template-columns:repeat(4,1fr);gap:16px}}
@media(min-width:1200px){.app-grid{grid-template-columns:repeat(5,1fr);gap:18px}}
@media(min-width:600px){.app-grid{grid-template-columns:repeat(3,1fr);gap:12px}}
@media(min-width:900px){.app-grid{grid-template-columns:repeat(4,1fr);gap:14px}}
/* App Card */
.app-card{
background:var(--surface); border:1px solid var(--border);
border-radius:var(--radius); padding:20px 16px;
border-radius:var(--radius-sm); padding:16px 12px;
cursor:pointer; transition:all 0.2s; text-decoration:none; color:inherit;
display:flex; flex-direction:column; align-items:center; gap:10px;
min-height:140px; justify-content:center; position:relative
display:flex; flex-direction:column; align-items:center; gap:8px;
aspect-ratio:1; justify-content:center; position:relative
}
.app-card:active{transform:scale(0.97)}
.app-card:hover{border-color:var(--surface3); box-shadow:0 4px 16px rgba(0,0,0,0.2)}
.app-card:hover{border-color:var(--surface3); box-shadow:0 2px 12px rgba(0,0,0,0.2)}
.app-card .app-icon{
width:52px;height:52px;border-radius:var(--radius-sm);
width:44px;height:44px;border-radius:var(--radius-sm);
display:flex;align-items:center;justify-content:center;flex-shrink:0
}
.app-card .app-icon svg{width:26px;height:26px}
.app-card .app-name{font-size:0.9rem;font-weight:500;color:var(--text);text-align:center}
.app-card .app-icon svg{width:22px;height:22px}
.app-card .app-name{font-size:0.85rem;font-weight:500;color:var(--text);text-align:center;line-height:1.2}
.app-card .app-badge{
font-size:0.7rem;color:var(--text3);position:absolute;bottom:8px
font-size:0.7rem;color:var(--text3);position:absolute;bottom:6px
}
.app-card.disabled{opacity:0.4;cursor:default}
.app-card.disabled:active{transform:none}

File diff suppressed because one or more lines are too long