v3: fixed search in prod, lots of UI fixes across the app
All checks were successful
Build and Publish Docker Image / build-and-push (push) Successful in 46s
All checks were successful
Build and Publish Docker Image / build-and-push (push) Successful in 46s
This commit is contained in:
khannurien
206
src/App.css
206
src/App.css
@@ -99,21 +99,25 @@
|
||||
}
|
||||
|
||||
.dump-header-block {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
column-gap: 1rem;
|
||||
row-gap: 0.3rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.dump-title,
|
||||
.dump-op {
|
||||
grid-column: 2;
|
||||
.dump-header-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.dump-header-block .vote-btn,
|
||||
.dump-header-block .btn-add-playlist {
|
||||
justify-self: center;
|
||||
.dump-header-right {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.dump-title {
|
||||
@@ -1019,6 +1023,18 @@ body.has-player .fab-new {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media (max-width: 512px) {
|
||||
.rich-content-card {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.rich-content-thumbnail {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-height: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
.rich-content-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -1033,7 +1049,7 @@ body.has-player .fab-new {
|
||||
.rich-content-badge {
|
||||
display: inline-block;
|
||||
background: var(--color-youtube);
|
||||
color: var(--color-on-accent);
|
||||
color: var(--color-text);
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
@@ -1272,9 +1288,9 @@ body.has-player .fab-new {
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.profile-tabs {
|
||||
.profile-tabs-scroller {
|
||||
margin-top: 0.5rem;
|
||||
padding-bottom: 0.75rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 2px solid var(--color-border);
|
||||
}
|
||||
|
||||
@@ -1592,6 +1608,7 @@ body.has-player .fab-new {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.profile-subpage-title {
|
||||
@@ -1694,8 +1711,9 @@ body.has-player .fab-new {
|
||||
}
|
||||
|
||||
.app-header-status {
|
||||
margin: 1rem auto 0 auto;
|
||||
margin: 1rem auto 0;
|
||||
max-width: 860px;
|
||||
width: calc(100% - 2rem);
|
||||
padding: 0.75rem 1rem;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
@@ -2240,7 +2258,7 @@ body.has-player .fab-new {
|
||||
|
||||
.btn-danger {
|
||||
background: var(--color-danger-bg);
|
||||
color: var(--color-on-accent);
|
||||
color: var(--color-text);
|
||||
border: none;
|
||||
}
|
||||
|
||||
@@ -2317,7 +2335,11 @@ body.has-player .fab-new {
|
||||
align-items: center;
|
||||
margin-top: 0.5rem;
|
||||
gap: 0.75rem;
|
||||
padding: 0.6rem 1.25rem 0;
|
||||
padding: 0.6rem 1.25rem 0.4rem;
|
||||
max-width: 860px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
@media (min-width: 860px) {
|
||||
@@ -2326,11 +2348,50 @@ body.has-player .fab-new {
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Feed sort buttons ── */
|
||||
/* ── Feed sort scroller + buttons ── */
|
||||
|
||||
/* Wrapper: constrains width, clips scroll overflow, and carries the gradient hint */
|
||||
.feed-sort-scroller {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Right-edge gradient: absolutely positioned over the scroll container,
|
||||
always at the viewport-right edge regardless of scroll position */
|
||||
.feed-sort-scroller::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 2rem;
|
||||
background: linear-gradient(to right, transparent, var(--color-bg));
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* In the app header the tabs never overflow — suppress the gradient there */
|
||||
.app-header .feed-sort-scroller::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* In the index below-header the scroller should fill the available row width */
|
||||
.index-below-header .feed-sort-scroller {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.feed-sort {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
padding-bottom: 0.3rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.feed-sort::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.feed-sort-btn {
|
||||
@@ -2345,6 +2406,8 @@ body.has-player .fab-new {
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
transition: border-color 0.15s, background 0.15s, color 0.15s;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.feed-sort-btn.active {
|
||||
@@ -2433,6 +2496,64 @@ body.has-player .fab-new {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Desktop: wrapper is transparent — preview and vote become direct flex items of dump-card-inner */
|
||||
.dump-card-left {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
/* With display:contents, all three are siblings in dump-card-inner's flex context.
|
||||
DOM order is: preview, vote, body — use order to restore: preview, body, vote. */
|
||||
.dump-card-body {
|
||||
order: 1;
|
||||
margin-left: 0.25rem; /* total gap to preview = container gap (0.75) + this = 1rem */
|
||||
}
|
||||
|
||||
.dump-card-vote {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
@media (max-width: 512px) {
|
||||
.dump-card-inner,
|
||||
.playlist-card-inner {
|
||||
gap: 0.5rem;
|
||||
padding: 0.6rem 0.75rem;
|
||||
}
|
||||
|
||||
/* Reset flex order and margin — narrow mode uses dump-card-left as a real flex container */
|
||||
.dump-card-body,
|
||||
.dump-card-vote {
|
||||
order: 0;
|
||||
}
|
||||
|
||||
|
||||
/* Left column: preview + vote stacked with fixed gap, independent of body height */
|
||||
.dump-card-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.dump-card-body {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.dump-card-meta {
|
||||
flex-direction: column;
|
||||
gap: 0.1rem;
|
||||
}
|
||||
|
||||
.dump-card-comment {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.playlist-card-description {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Shared card preview thumbnail ── */
|
||||
.dump-card-preview,
|
||||
.playlist-card-preview {
|
||||
@@ -2492,6 +2613,7 @@ body.has-player .fab-new {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.2rem;
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
/* ── Shared card title link ── */
|
||||
@@ -2580,11 +2702,35 @@ body.has-player .fab-new {
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
@media (max-width: 512px) {
|
||||
.playlist-card-meta {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.dump-card-vote {
|
||||
flex-shrink: 0;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
@media (max-width: 512px) {
|
||||
.index-below-header .index-presence {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 512px) {
|
||||
.app-header-brand-name {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.btn-new-label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Playlist card image thumbnail ── */
|
||||
.playlist-card-img {
|
||||
width: 100%;
|
||||
@@ -2888,6 +3034,14 @@ body.has-player .fab-new {
|
||||
font-size: 0.82rem;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
@media (max-width: 512px) {
|
||||
.playlist-detail-meta {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.1rem;
|
||||
}
|
||||
}
|
||||
.playlist-detail-owner {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
@@ -2898,7 +3052,7 @@ body.has-player .fab-new {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* ── Playlist header inline edit ── */
|
||||
|
||||
.playlist-detail-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
@@ -4315,6 +4469,22 @@ body.has-player .fab-new {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
@media (max-width: 512px) {
|
||||
.profile-appearance-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.profile-appearance-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-appearance-label {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
|
||||
Reference in New Issue
Block a user