feat: enlarge admin thumbnails for hero, album, and subpage grids

- Hero grid: 140px → 220px min tile width
- Album grid: 160px → 240px min tile width
- Subpage grid: 140px → 200px min tile width
- Picker thumbnails: 40px → 52px
- Admin main max-width: 960px → 1120px for more space
- Slightly larger overlay buttons and index badges
This commit is contained in:
ralksta
2026-05-29 17:37:34 +02:00
parent f820a7b683
commit 4416502e14

View File

@@ -380,7 +380,7 @@
.admin-main { .admin-main {
flex: 1; flex: 1;
padding: 1.5rem; padding: 1.5rem;
max-width: 960px; max-width: 1120px;
margin: 0 auto; margin: 0 auto;
width: 100%; width: 100%;
} }
@@ -459,14 +459,14 @@
/* Hero Grid */ /* Hero Grid */
.hero-grid { .hero-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 0.6rem; gap: 0.75rem;
} }
.hero-tile { .hero-tile {
position: relative; position: relative;
aspect-ratio: 16 / 10; aspect-ratio: 16 / 10;
border-radius: 8px; border-radius: 10px;
overflow: hidden; overflow: hidden;
background: var(--admin-bg-elevated); background: var(--admin-bg-elevated);
border: 1px solid var(--admin-border); border: 1px solid var(--admin-border);
@@ -485,16 +485,16 @@
.hero-tile-remove { .hero-tile-remove {
position: absolute; position: absolute;
top: 4px; top: 6px;
right: 4px; right: 6px;
width: 22px; width: 26px;
height: 22px; height: 26px;
border-radius: 50%; border-radius: 50%;
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px); backdrop-filter: blur(4px);
border: none; border: none;
color: #fff; color: #fff;
font-size: 0.85rem; font-size: 0.9rem;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -513,14 +513,14 @@
.hero-tile-index { .hero-tile-index {
position: absolute; position: absolute;
bottom: 4px; bottom: 6px;
left: 4px; left: 6px;
width: 18px; width: 22px;
height: 18px; height: 22px;
border-radius: 4px; border-radius: 5px;
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);
color: #fff; color: #fff;
font-size: 0.65rem; font-size: 0.7rem;
font-weight: 600; font-weight: 600;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -530,8 +530,8 @@
/* Album Grid */ /* Album Grid */
.album-list { .album-list {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 0.75rem; gap: 1rem;
} }
.album-tile { .album-tile {
@@ -590,14 +590,14 @@
backdrop-filter: blur(4px); backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.25); border: 1px solid rgba(255, 255, 255, 0.25);
color: #fff; color: #fff;
width: 32px; width: 36px;
height: 32px; height: 36px;
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
font-size: 0.85rem; font-size: 0.95rem;
transition: background 0.1s; transition: background 0.1s;
} }
@@ -606,14 +606,14 @@
} }
.album-tile-info { .album-tile-info {
padding: 0.5rem 0.6rem; padding: 0.6rem 0.75rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.1rem; gap: 0.15rem;
} }
.album-tile-name { .album-tile-name {
font-size: 0.8rem; font-size: 0.875rem;
font-weight: 500; font-weight: 500;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@@ -621,7 +621,7 @@
} }
.album-tile-count { .album-tile-count {
font-size: 0.7rem; font-size: 0.75rem;
color: var(--admin-text-muted); color: var(--admin-text-muted);
} }
@@ -644,8 +644,8 @@
/* Subpage Overview Grid */ /* Subpage Overview Grid */
.subpage-grid { .subpage-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 0.6rem; gap: 0.75rem;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@@ -937,21 +937,21 @@
} }
.picker-thumb-placeholder { .picker-thumb-placeholder {
width: 40px; width: 52px;
height: 40px; height: 52px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: var(--admin-bg-elevated); background: var(--admin-bg-elevated);
border-radius: 6px; border-radius: 8px;
font-size: 1.1rem; font-size: 1.2rem;
} }
.picker-thumb-img { .picker-thumb-img {
width: 40px; width: 52px;
height: 40px; height: 52px;
object-fit: cover; object-fit: cover;
border-radius: 6px; border-radius: 8px;
background: var(--admin-bg-elevated); background: var(--admin-bg-elevated);
} }