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:
@@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user