fix(ui): smaller icons, aspect-ratio cards, max 4 cols, 2col mobile
This commit is contained in:
parent
2579715cbc
commit
a4163b6595
2 changed files with 12 additions and 13 deletions
|
|
@ -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
Loading…
Reference in a new issue