mrleo1nidandCursor
72567acd28
release / desktop (Linux и Windows в релиз) (push) Successful in 16m22s
release / prune (старые файлы и прогоны) (push) Successful in 6s
ci / mobile / mobile (Metro-бандл Android) (push) Successful in 1m23s
release / release (версия и заметки) (push) Successful in 6s
ci / ts / ts (packages + web) (push) Failing after 5m25s
release / android (APK в релиз) (push) Successful in 4m18s
Co-authored-by: Cursor <cursoragent@cursor.com>
452 lines
7.9 KiB
CSS
452 lines
7.9 KiB
CSS
.bar {
|
|
position: relative;
|
|
grid-area: player;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);
|
|
align-items: center;
|
|
gap: 20px;
|
|
padding: 0 20px;
|
|
border-top: 1px solid var(--line);
|
|
background: var(--bar-a);
|
|
backdrop-filter: blur(20px);
|
|
}
|
|
|
|
.bar.island {
|
|
position: fixed;
|
|
left: 50%;
|
|
bottom: 16px;
|
|
z-index: 5;
|
|
width: min(1040px, calc(100% - 32px));
|
|
height: 84px;
|
|
transform: translateX(-50%);
|
|
border: 1px solid var(--line2);
|
|
border-radius: var(--radius-xl);
|
|
background: var(--glass);
|
|
backdrop-filter: blur(28px) saturate(1.3);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.source {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
margin-top: 2px;
|
|
font-size: 12px;
|
|
color: var(--text3);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
a.source {
|
|
text-decoration: none;
|
|
}
|
|
|
|
a.source:hover {
|
|
color: var(--text);
|
|
}
|
|
|
|
.sourceWave {
|
|
color: var(--accent2);
|
|
}
|
|
|
|
.empty {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
color: var(--text3);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.placeholder {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 52px;
|
|
height: 52px;
|
|
border-radius: 10px;
|
|
background: var(--surface2);
|
|
}
|
|
|
|
.now {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.meta {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
.title {
|
|
font-weight: 600;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.artists {
|
|
font-size: 13px;
|
|
color: var(--text2);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.icon {
|
|
display: grid;
|
|
place-items: center;
|
|
flex: none;
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
color: var(--text2);
|
|
}
|
|
|
|
.icon:hover {
|
|
color: var(--text);
|
|
background: var(--hover);
|
|
}
|
|
|
|
.accent {
|
|
color: var(--accent2);
|
|
}
|
|
|
|
.danger {
|
|
color: var(--danger);
|
|
}
|
|
|
|
.center {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 4px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.play {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 42px;
|
|
height: 42px;
|
|
border-radius: 50%;
|
|
background: #fff;
|
|
color: #05070d;
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
|
|
transition: transform 0.12s;
|
|
}
|
|
|
|
.play:hover {
|
|
transform: scale(1.06);
|
|
}
|
|
|
|
.play:active {
|
|
transform: scale(0.94);
|
|
}
|
|
|
|
.nowArt {
|
|
position: relative;
|
|
display: grid;
|
|
place-items: center;
|
|
flex: none;
|
|
padding: 0;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.nowEq {
|
|
position: absolute;
|
|
right: -2px;
|
|
bottom: -2px;
|
|
padding: 2px 4px;
|
|
border-radius: 6px;
|
|
background: var(--surface);
|
|
}
|
|
|
|
.coverLive {
|
|
animation: pipuCoverPulse 2.4s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes pipuCoverPulse {
|
|
50% {
|
|
filter: brightness(1.12);
|
|
}
|
|
}
|
|
|
|
.queueScrim,
|
|
.sheetScrim {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 15;
|
|
background: var(--overlay);
|
|
animation: pipuIn 0.18s ease-out;
|
|
}
|
|
|
|
.sheet {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 16;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 16px;
|
|
max-height: min(92dvh, 760px);
|
|
padding: 12px 20px calc(24px + env(safe-area-inset-bottom, 0px));
|
|
border-radius: 24px 24px 0 0;
|
|
background: var(--glass);
|
|
backdrop-filter: blur(28px) saturate(1.3);
|
|
animation: pipuIn 0.22s ease-out;
|
|
}
|
|
|
|
.sheetHead {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.sheetCover {
|
|
width: min(240px, 56vw) !important;
|
|
height: min(240px, 56vw) !important;
|
|
border-radius: 16px;
|
|
}
|
|
|
|
.sheetMeta {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 4px;
|
|
text-align: center;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.sheetTitle {
|
|
font-family: var(--font-display);
|
|
font-size: 22px;
|
|
font-weight: 600;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.sheetControls,
|
|
.sheetExtra {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
width: 100%;
|
|
}
|
|
|
|
.sheet .progress {
|
|
max-width: none;
|
|
}
|
|
|
|
.sheet .volume {
|
|
flex: 1;
|
|
max-width: 160px;
|
|
}
|
|
|
|
.play[aria-busy='true'] {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.progress {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
width: 100%;
|
|
max-width: 560px;
|
|
}
|
|
|
|
.time {
|
|
font-size: 12px;
|
|
color: var(--text3);
|
|
font-variant-numeric: tabular-nums;
|
|
min-width: 38px;
|
|
text-align: center;
|
|
}
|
|
|
|
.range {
|
|
flex: 1;
|
|
height: 4px;
|
|
appearance: none;
|
|
border-radius: 2px;
|
|
background: linear-gradient(90deg, var(--accent2) var(--pct, 0%), var(--surface3) var(--pct, 0%));
|
|
cursor: pointer;
|
|
}
|
|
|
|
.range::-webkit-slider-thumb {
|
|
appearance: none;
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
background: #fff;
|
|
opacity: 0;
|
|
transition: opacity 0.15s;
|
|
}
|
|
|
|
.range:hover::-webkit-slider-thumb,
|
|
.range:focus-visible::-webkit-slider-thumb {
|
|
opacity: 1;
|
|
}
|
|
|
|
.range::-moz-range-thumb {
|
|
width: 12px;
|
|
height: 12px;
|
|
border: 0;
|
|
border-radius: 50%;
|
|
background: #fff;
|
|
}
|
|
|
|
.error {
|
|
font-size: 12px;
|
|
color: var(--danger);
|
|
}
|
|
|
|
.right {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
}
|
|
|
|
.volume {
|
|
flex: 0 1 120px;
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.now {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.bar {
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
padding: 0 12px;
|
|
gap: 10px;
|
|
}
|
|
|
|
.progress,
|
|
.right,
|
|
.controls > :first-child,
|
|
.controls > :last-child,
|
|
.now > button:not(.nowArt) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.drawer {
|
|
position: fixed;
|
|
right: 16px;
|
|
bottom: 100px;
|
|
z-index: 16;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: min(380px, calc(100% - 32px));
|
|
max-height: min(560px, calc(100% - 180px));
|
|
border: 1px solid var(--line2);
|
|
border-radius: var(--radius-xl);
|
|
background: var(--glass);
|
|
backdrop-filter: blur(28px) saturate(1.3);
|
|
box-shadow: var(--shadow);
|
|
animation: pipuSlideIn 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
}
|
|
|
|
.drawerNote {
|
|
margin: 0;
|
|
padding: 12px 18px 16px;
|
|
border-top: 1px solid var(--line);
|
|
color: var(--text3);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.drawerIsland {
|
|
bottom: 112px;
|
|
}
|
|
|
|
.drawerHead {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 14px 12px 10px 18px;
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.drawerList {
|
|
overflow-y: auto;
|
|
padding: 0 8px 10px;
|
|
}
|
|
|
|
.queueRow {
|
|
display: grid;
|
|
grid-template-columns: 40px minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: 12px;
|
|
width: 100%;
|
|
padding: 6px 10px;
|
|
border-radius: 12px;
|
|
text-align: left;
|
|
}
|
|
|
|
.queueRow:hover {
|
|
background: var(--hover);
|
|
}
|
|
|
|
.queueCurrent {
|
|
background: var(--accent-soft);
|
|
}
|
|
|
|
.queueCurrent .title {
|
|
color: var(--accent2);
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.bar { grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; padding: 0 8px; }
|
|
.bar.island { position: relative; left: auto; bottom: auto; width: auto; height: auto;
|
|
transform: none; margin: 0 8px; border-radius: 16px; }
|
|
.empty { grid-column: 1 / -1; }
|
|
.placeholder { flex: none; }
|
|
.now { gap: 8px; }
|
|
.now > :first-child { width: 44px !important; height: 44px !important; }
|
|
.source { display: none; }
|
|
.controls { gap: 2px; }
|
|
.play, .icon { width: 44px; height: 44px; }
|
|
.right { display: flex; gap: 0; }
|
|
.right > :not(.queueButton):not(.shareButton):not(.playlistButton) { display: none; }
|
|
.error { position: absolute; bottom: calc(100% + 8px); left: 8px; right: 8px;
|
|
padding: 8px 12px; background: var(--surface3); border-radius: 10px; text-align: center; }
|
|
.drawer, .drawerIsland { bottom: calc(144px + env(safe-area-inset-bottom, 0px));
|
|
max-height: calc(100dvh - 180px - env(safe-area-inset-bottom, 0px)); }
|
|
}
|
|
|
|
@media (max-width: 359px) {
|
|
.now > :first-child { display: none; }
|
|
/* share + очередь + три кнопки управления не оставляют месту название трека (e2e 320px). */
|
|
.shareButton { display: none; }
|
|
}
|
|
|
|
.shareStatus {
|
|
position: absolute;
|
|
bottom: calc(100% + 8px);
|
|
right: 8px;
|
|
max-width: calc(100% - 16px);
|
|
padding: 10px 16px;
|
|
border-radius: 12px;
|
|
background: var(--surface3);
|
|
color: var(--text);
|
|
box-shadow: var(--shadow);
|
|
font-size: 13px;
|
|
}
|