Files
pipu-music/apps/web/src/pages/uploads/uploads.module.css
T
mrleo1nid 1e3b350dfc
ci / contract / contract (сгенерированный код совпадает с openapi.yaml) (push) Successful in 1m1s
ci / db / db (push) Successful in 1m16s
ci / mobile / mobile (Metro-бандл Android) (push) Successful in 1m12s
ci / api / api (push) Successful in 45s
ci / recommender / recommender (push) Successful in 1m50s
ci / ts / ts (packages + web) (push) Failing after 6m53s
ci / docker / docker (образы собираются — их сервер собирает сам при обновлении) (push) Successful in 1m13s
feat(upload): enhance audio upload handling and user feedback
- Introduced a new warning for users uploading non-FLAC or WAV formats, indicating that these formats should only be used as a last resort.
- Added functionality to highlight files needing format attention in the upload queue.
- Updated the UI to provide clearer guidance on acceptable audio formats during uploads.
- Improved documentation to reflect changes in upload requirements and user interface updates.
2026-10-21 10:07:43 +03:00

281 lines
4.2 KiB
CSS

.drop {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
min-height: 180px;
padding: 24px;
border: 2px dashed var(--line2);
border-radius: var(--radius-lg);
background: var(--surface);
text-align: center;
transition:
border-color 0.15s,
background 0.15s;
}
.dropActive {
border-color: var(--accent);
background: var(--accent-soft);
}
.dropTitle {
font-size: 16px;
font-weight: 600;
}
.formatWarn {
max-width: 640px;
margin: 0;
font-size: 14px;
font-weight: 600;
line-height: 1.45;
color: var(--warn);
}
.dropActions {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
}
.hiddenInput {
display: none;
}
.files {
display: flex;
flex-direction: column;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
overflow: hidden;
}
.file {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: center;
gap: 12px;
padding: 10px 14px;
border-top: 1px solid var(--line);
background: var(--surface);
}
.file:first-child {
border-top: 0;
}
.fileName {
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.path {
font-family: var(--font-mono, monospace);
font-size: 13px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sub {
font-size: 12px;
color: var(--text3);
}
.warn {
font-size: 12px;
color: var(--warn);
}
.bad {
font-size: 12px;
color: var(--danger);
}
.size {
font-size: 13px;
color: var(--text3);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.progress {
height: 4px;
border-radius: 2px;
background: var(--surface3);
overflow: hidden;
}
.progress span {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--accent), var(--violet));
transition: width 0.3s;
}
.quota {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 220px;
}
.quotaText {
font-size: 13px;
color: var(--text2);
}
.tone_ok {
color: var(--ok);
background: var(--ok-soft);
}
.tone_warn {
color: var(--warn);
background: var(--warn-soft);
}
.tone_bad {
color: var(--danger);
background: var(--danger-soft);
}
.tone_info {
color: var(--accent2);
background: var(--accent-soft);
}
.tone_muted {
color: var(--text3);
background: var(--surface3);
}
.batch {
display: flex;
flex-direction: column;
gap: 0;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
overflow: hidden;
}
.batchHead {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 16px;
padding: 12px 14px;
background: var(--surface2);
font-size: 13px;
color: var(--text2);
}
.batchHead b {
color: var(--text);
}
.comment {
flex-basis: 100%;
color: var(--text);
font-style: italic;
}
.queueRow {
display: grid;
grid-template-columns: auto minmax(0, 1.4fr) minmax(0, 1fr) auto;
gap: 14px;
align-items: start;
padding: 12px 14px;
border-top: 1px solid var(--line);
background: var(--surface);
}
.meta {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.metaTitle {
font-weight: 600;
}
.flags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.rowActions {
display: flex;
gap: 6px;
align-items: center;
}
.bulk {
position: sticky;
bottom: 12px;
z-index: 2;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-radius: var(--radius-lg);
border: 1px solid var(--line2);
background: var(--elev);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
}
.textarea {
width: 100%;
min-height: 72px;
padding: 10px 12px;
border-radius: var(--radius-md);
border: 1px solid var(--line2);
background: var(--surface2);
color: var(--text);
font: inherit;
resize: vertical;
}
@media (max-width: 720px) {
.queueRow {
grid-template-columns: auto minmax(0, 1fr);
}
.file {
grid-template-columns: minmax(0, 1fr) auto;
}
}
.target {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text2);
overflow-wrap: anywhere;
}
.trackCell {
min-width: 260px;
max-width: 480px;
}
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}