v1 feature: added playlists
This commit is contained in:
khannurien
704
src/App.css
704
src/App.css
@@ -67,9 +67,6 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
/* margin-top: 1rem; */
|
||||
/* padding-top: 1rem; */
|
||||
/* border-top: 1px solid rgba(128, 128, 128, 0.18); */
|
||||
}
|
||||
|
||||
.dump-actions a {
|
||||
@@ -89,7 +86,7 @@
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/* Forms */
|
||||
/* ── Forms ── */
|
||||
.auth-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -159,6 +156,13 @@
|
||||
color-mix(in srgb, var(--color-accent) 18%, transparent);
|
||||
}
|
||||
|
||||
.dump-form input:disabled,
|
||||
.dump-form textarea:disabled,
|
||||
.auth-form input:disabled,
|
||||
.auth-form textarea:disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* ── New dump form ── */
|
||||
.dump-create-wrapper {
|
||||
width: 100%;
|
||||
@@ -194,7 +198,7 @@
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
/* Mode toggle — segmented control */
|
||||
/* ── Mode toggle — segmented control ── */
|
||||
.dump-mode-toggle {
|
||||
display: flex;
|
||||
background: var(--color-bg);
|
||||
@@ -633,14 +637,7 @@
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.dump-form input:disabled,
|
||||
.dump-form textarea:disabled,
|
||||
.auth-form input:disabled,
|
||||
.auth-form textarea:disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* Online users */
|
||||
/* ── Online users ── */
|
||||
.online-users {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -667,7 +664,7 @@
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Vote button */
|
||||
/* ── Vote button ── */
|
||||
.vote-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -718,7 +715,7 @@
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* Dump OP line */
|
||||
/* ── Dump OP line ── */
|
||||
.dump-op {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -737,7 +734,7 @@
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
/* Avatar edit overlay */
|
||||
/* ── Avatar edit overlay ── */
|
||||
.profile-avatar-wrapper {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
@@ -762,7 +759,7 @@
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Public profile page */
|
||||
/* ── Public profile page ── */
|
||||
.profile-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -788,12 +785,6 @@
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.profile-section h2 {
|
||||
margin-bottom: 0.75rem;
|
||||
border-bottom: 2px solid var(--color-border);
|
||||
padding-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.profile-section ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
@@ -806,7 +797,26 @@
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Profile page */
|
||||
/* ── Profile section header (shared between bare h2 and wrapper div) ── */
|
||||
.profile-section > h2,
|
||||
.profile-section-header {
|
||||
margin-bottom: 0.75rem;
|
||||
border-bottom: 2px solid var(--color-border);
|
||||
padding-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.profile-section-title {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.profile-section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* ── Profile (own) page ── */
|
||||
.profile-avatar-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -986,7 +996,6 @@
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Center slot: hidden on narrow, shown on wide */
|
||||
.app-header-center {
|
||||
display: none;
|
||||
align-items: center;
|
||||
@@ -1167,18 +1176,78 @@
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* ── Delete button ── */
|
||||
/* ── Buttons ── */
|
||||
.btn-primary,
|
||||
.btn-secondary,
|
||||
.btn-danger {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
border-radius: 8px;
|
||||
font-family: inherit;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
padding: 0.4rem 1rem;
|
||||
transition:
|
||||
background 0.15s,
|
||||
color 0.15s,
|
||||
border-color 0.15s,
|
||||
box-shadow 0.15s,
|
||||
transform 0.1s;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--color-accent);
|
||||
color: var(--color-on-accent);
|
||||
border: none;
|
||||
box-shadow: 0 2px 8px
|
||||
color-mix(in srgb, var(--color-accent) 40%, transparent);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--color-accent-hover);
|
||||
box-shadow: 0 4px 14px
|
||||
color-mix(in srgb, var(--color-accent) 50%, transparent);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-primary:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: none;
|
||||
border: 1px solid var(--color-border);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
border-color: var(--color-accent);
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: var(--color-danger-bg);
|
||||
color: var(--color-on-accent);
|
||||
border-color: transparent;
|
||||
font-size: 0.85rem;
|
||||
padding: 0.4em 0.9em;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: var(--color-danger-hover);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
/* ── Ghost icon buttons (shared base) ── */
|
||||
.modal-close-btn,
|
||||
.playlist-remove-btn,
|
||||
.playlist-card-delete-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
border-radius: 4px;
|
||||
transition: opacity 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
/* ── Index page ── */
|
||||
@@ -1201,32 +1270,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--color-accent);
|
||||
color: var(--color-on-accent);
|
||||
font-weight: 700;
|
||||
font-size: 0.95rem;
|
||||
padding: 0.45rem 1.1rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 8px
|
||||
color-mix(in srgb, var(--color-accent) 40%, transparent);
|
||||
transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--color-accent-hover);
|
||||
box-shadow: 0 4px 14px
|
||||
color-mix(in srgb, var(--color-accent) 50%, transparent);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-primary:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.index-presence-avatar {
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
@@ -1279,7 +1322,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Feed sort buttons (shared between header center and below-header) ── */
|
||||
/* ── Feed sort buttons ── */
|
||||
.feed-sort {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -1324,24 +1367,38 @@
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.dump-card {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr;
|
||||
/* ── Shared card skin (dump-card + playlist-card) ── */
|
||||
.dump-card,
|
||||
.playlist-card {
|
||||
border: 2px solid var(--color-border);
|
||||
border-radius: 10px;
|
||||
background: var(--color-surface);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.dump-card:hover,
|
||||
.playlist-card:hover {
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
/* Card-specific layout */
|
||||
.dump-card {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr;
|
||||
transition:
|
||||
border-color 0.15s,
|
||||
grid-template-rows 0.32s ease,
|
||||
opacity 0.25s ease;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.dump-card:hover {
|
||||
border-color: var(--color-accent);
|
||||
.playlist-card {
|
||||
position: relative;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
|
||||
.dump-card-inner {
|
||||
/* ── Shared card inner layout ── */
|
||||
.dump-card-inner,
|
||||
.playlist-card-inner {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
@@ -1351,7 +1408,9 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dump-card-preview {
|
||||
/* ── Shared card preview thumbnail ── */
|
||||
.dump-card-preview,
|
||||
.playlist-card-preview {
|
||||
flex-shrink: 0;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
@@ -1365,17 +1424,22 @@
|
||||
transition: transform 0.18s ease, box-shadow 0.18s ease;
|
||||
}
|
||||
|
||||
.dump-card-inner:hover .dump-card-preview {
|
||||
.dump-card-inner:hover .dump-card-preview,
|
||||
.playlist-card-inner:hover .playlist-card-preview {
|
||||
transform: scale(1.08);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.dump-card-preview-icon {
|
||||
/* ── Shared card preview icon ── */
|
||||
.dump-card-preview-icon,
|
||||
.playlist-card-icon {
|
||||
font-size: 1.4rem;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.dump-card-body {
|
||||
/* ── Shared card body ── */
|
||||
.dump-card-body,
|
||||
.playlist-card-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
@@ -1383,7 +1447,9 @@
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.dump-card-title {
|
||||
/* ── Shared card title link ── */
|
||||
.dump-card-title,
|
||||
.playlist-card-title {
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
color: var(--color-text);
|
||||
@@ -1393,26 +1459,516 @@
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.dump-card-inner:hover .dump-card-title {
|
||||
.dump-card-inner:hover .dump-card-title,
|
||||
.playlist-card-inner:hover .playlist-card-title {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.dump-card-comment {
|
||||
/* ── Shared card description / comment ── */
|
||||
.dump-card-comment,
|
||||
.playlist-card-description {
|
||||
margin: 0;
|
||||
font-size: 0.85rem;
|
||||
opacity: 0.65;
|
||||
word-break: break-word;
|
||||
line-height: 1.4;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dump-card-comment {
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
|
||||
.playlist-card-description {
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
/* ── Shared card meta row ── */
|
||||
.dump-card-date,
|
||||
.playlist-card-meta {
|
||||
font-size: 0.78rem;
|
||||
opacity: 0.45;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
.dump-card-date {
|
||||
display: block;
|
||||
font-size: 0.78rem;
|
||||
opacity: 0.45;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
.playlist-card-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.dump-card-vote {
|
||||
flex-shrink: 0;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
/* ── Playlist card image thumbnail ── */
|
||||
.playlist-card-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ── Playlist badge ── */
|
||||
.playlist-badge {
|
||||
display: inline-block;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
padding: 0.1rem 0.45rem;
|
||||
border-radius: 4px;
|
||||
background: color-mix(in srgb, var(--color-accent) 20%, transparent);
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.playlist-badge--private {
|
||||
background: color-mix(in srgb, var(--color-text-muted) 20%, transparent);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
/* ── Playlist card dump count ── */
|
||||
.playlist-card-count {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* ── Playlist card delete button ── */
|
||||
.playlist-card-delete-btn {
|
||||
position: absolute;
|
||||
top: 0.4rem;
|
||||
right: 0.4rem;
|
||||
color: var(--color-text);
|
||||
opacity: 0;
|
||||
font-size: 0.8rem;
|
||||
padding: 0.2rem 0.35rem;
|
||||
}
|
||||
|
||||
.playlist-card:hover .playlist-card-delete-btn {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.playlist-card-delete-btn:hover {
|
||||
opacity: 1 !important;
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
/* ── Modal (shared) ── */
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: var(--color-overlay);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
/* Shared modal box surface */
|
||||
.modal-card,
|
||||
.confirm-modal {
|
||||
background: var(--color-surface);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.modal-card {
|
||||
max-width: 420px;
|
||||
max-height: 80vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.confirm-modal {
|
||||
max-width: 340px;
|
||||
padding: 1.5rem 1.25rem 1.25rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 1.25rem;
|
||||
border-bottom: 1px solid var(--color-border-subtle);
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.modal-close-btn {
|
||||
color: var(--color-text);
|
||||
font-size: 1rem;
|
||||
opacity: 0.6;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
.modal-close-btn:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 1rem 1.25rem;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.confirm-modal-message {
|
||||
margin: 0;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.confirm-modal-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
/* ── Membership rows ── */
|
||||
.playlist-membership-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.playlist-membership-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.6rem 0.75rem;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.playlist-membership-row:hover {
|
||||
background: color-mix(in srgb, var(--color-accent) 10%, transparent);
|
||||
}
|
||||
|
||||
.playlist-membership-row--active {
|
||||
background: color-mix(in srgb, var(--color-accent) 12%, transparent);
|
||||
}
|
||||
|
||||
.playlist-membership-name {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.playlist-membership-check {
|
||||
font-size: 1rem;
|
||||
color: var(--color-accent);
|
||||
width: 1.2rem;
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ── Inline new-playlist form ── */
|
||||
.modal-new-playlist-toggle {
|
||||
background: none;
|
||||
border: 1px dashed var(--color-border-subtle);
|
||||
border-radius: 8px;
|
||||
color: var(--color-accent);
|
||||
cursor: pointer;
|
||||
padding: 0.6rem 1rem;
|
||||
font-size: 0.9rem;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
transition: border-color 0.15s, background 0.15s;
|
||||
}
|
||||
|
||||
.modal-new-playlist-toggle:hover {
|
||||
border-color: var(--color-accent);
|
||||
background: color-mix(in srgb, var(--color-accent) 8%, transparent);
|
||||
}
|
||||
|
||||
.modal-new-playlist-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.modal-new-playlist-form input,
|
||||
.modal-new-playlist-form textarea {
|
||||
padding: 0.6rem 0.9rem;
|
||||
border-radius: 8px;
|
||||
border: 2px solid var(--color-border-subtle);
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
font-size: 0.95rem;
|
||||
font-family: inherit;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.modal-new-playlist-form input:focus,
|
||||
.modal-new-playlist-form textarea:focus {
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
/* ── Playlist detail page ── */
|
||||
.playlist-detail-header {
|
||||
background: var(--color-surface);
|
||||
border-radius: 12px;
|
||||
padding: 1.25rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.playlist-detail-header-top {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.playlist-detail-img {
|
||||
flex-shrink: 0;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.playlist-detail-title {
|
||||
margin: 0 0 0.25rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.playlist-detail-description {
|
||||
margin: 0 0 0.5rem;
|
||||
opacity: 0.75;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.playlist-detail-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
font-size: 0.82rem;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* ── Playlist edit button ── */
|
||||
.playlist-edit-btn {
|
||||
margin-left: auto;
|
||||
flex-shrink: 0;
|
||||
background: none;
|
||||
border: 1px solid var(--color-border-subtle);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
color: var(--color-text);
|
||||
font-size: 0.85rem;
|
||||
padding: 0.25rem 0.7rem;
|
||||
opacity: 0.7;
|
||||
transition: opacity 0.15s, border-color 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
.playlist-edit-btn:hover {
|
||||
opacity: 1;
|
||||
border-color: var(--color-accent);
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
/* ── Playlist edit form ── */
|
||||
.playlist-edit-form {
|
||||
margin-top: 1rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid var(--color-border-subtle);
|
||||
}
|
||||
|
||||
.playlist-edit-fields {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.playlist-edit-input,
|
||||
.playlist-edit-textarea {
|
||||
background: var(--color-bg);
|
||||
border: 2px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
color: var(--color-text);
|
||||
font-size: 0.95rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-family: inherit;
|
||||
resize: vertical;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.playlist-edit-input:focus,
|
||||
.playlist-edit-textarea:focus {
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
.playlist-edit-toggle {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.playlist-edit-image-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.playlist-edit-img-preview {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
object-fit: cover;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--color-border);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playlist-edit-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
/* ── Playlist dump list ── */
|
||||
.playlist-dump-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.playlist-dump-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0 0.25rem;
|
||||
transition: background 0.15s;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.playlist-dump-item--drag-over {
|
||||
background: color-mix(in srgb, var(--color-accent) 12%, transparent);
|
||||
outline: 2px dashed var(--color-accent);
|
||||
}
|
||||
|
||||
.playlist-dump-item .dump-card {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* ── Playlist dump item action buttons ── */
|
||||
.playlist-remove-btn {
|
||||
flex-shrink: 0;
|
||||
color: var(--color-text);
|
||||
opacity: 0.4;
|
||||
font-size: 0.85rem;
|
||||
padding: 0.25rem 0.35rem;
|
||||
}
|
||||
|
||||
.playlist-remove-btn:hover {
|
||||
opacity: 1;
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.playlist-cancel-btn {
|
||||
flex-shrink: 0;
|
||||
background: none;
|
||||
border: 1px solid var(--color-border-subtle);
|
||||
cursor: pointer;
|
||||
color: var(--color-text);
|
||||
opacity: 0.7;
|
||||
font-size: 0.78rem;
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
transition: opacity 0.15s, border-color 0.15s, color 0.15s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.playlist-cancel-btn:hover {
|
||||
opacity: 1;
|
||||
border-color: var(--color-accent);
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.drag-handle {
|
||||
cursor: grab;
|
||||
opacity: 0.35;
|
||||
font-size: 1.1rem;
|
||||
flex-shrink: 0;
|
||||
user-select: none;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
|
||||
.drag-handle:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
/* ── Add to playlist button (dump detail) ── */
|
||||
.btn-add-playlist {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: var(--color-text);
|
||||
font-size: 0.9rem;
|
||||
opacity: 0.7;
|
||||
padding: 0;
|
||||
transition: opacity 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
.btn-add-playlist:hover {
|
||||
opacity: 1;
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
/* ── My Playlists page ── */
|
||||
.my-playlists-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.my-playlists-title {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* ── New playlist toggle (profile page header) ── */
|
||||
.new-playlist-toggle {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: var(--color-accent);
|
||||
font-size: 0.85rem;
|
||||
padding: 0;
|
||||
transition: opacity 0.15s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.new-playlist-toggle:hover {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user