Apply ten iterative posts UI improvements

This commit is contained in:
2026-02-24 23:09:49 +01:00
parent ad6e156268
commit 5d3a165921
3 changed files with 258 additions and 8 deletions

View File

@@ -4,6 +4,22 @@
box-sizing: border-box;
}
@media (prefers-reduced-motion: reduce) {
.tab-btn,
.search-clear-btn,
.posts-scroll-top,
.post-card,
.auto-open-overlay,
.auto-open-overlay__panel {
transition: none;
}
.post-card--highlight {
animation: none;
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.45);
}
}
:root {
--content-max-width: 1300px;
--top-gap: 12px;
@@ -302,6 +318,27 @@ header {
align-items: center;
}
.search-field__hint {
margin: 0;
font-size: 11px;
color: #64748b;
line-height: 1.35;
}
.search-field__hint kbd {
display: inline-block;
min-width: 18px;
padding: 1px 6px;
border-radius: 6px;
border: 1px solid #cbd5e1;
background: #f8fafc;
color: #0f172a;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
font-size: 11px;
font-weight: 700;
text-align: center;
}
.search-clear-btn {
position: absolute;
right: 6px;
@@ -806,6 +843,34 @@ h1 {
gap: 6px;
}
.posts-scroll-top {
position: fixed;
right: 20px;
bottom: 20px;
width: 42px;
height: 42px;
border: none;
border-radius: 999px;
background: #0f172a;
color: #fff;
font-size: 22px;
line-height: 1;
cursor: pointer;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.28);
z-index: 45;
transition: transform 0.2s ease, background-color 0.2s ease;
}
.posts-scroll-top:hover {
background: #1d4ed8;
transform: translateY(-2px);
}
.posts-scroll-top:focus-visible {
outline: 2px solid #1d4ed8;
outline-offset: 2px;
}
.post-card {
position: relative;
background: white;
@@ -2260,6 +2325,10 @@ h1 {
min-width: 100%;
}
.search-field__hint {
font-size: 10px;
}
.bulk-actions {
flex-direction: column;
align-items: stretch;
@@ -2455,7 +2524,15 @@ h1 {
justify-content: flex-start;
}
.search-filter-toggle {
order: 2;
width: 100%;
justify-content: flex-start;
}
.search-field {
order: 1;
width: 100%;
flex: 1 1 260px;
}
@@ -2472,6 +2549,12 @@ h1 {
.bulk-status {
width: 100%;
justify-content: flex-start;
}
.posts-scroll-top {
right: 14px;
bottom: 14px;
}
.form-actions {