deepdrft/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.css

/* Geometry, positioning, and animation only.
   Colour, surface, and elevation come from MudBlazor theme props. */

/* Fixed dock to the viewport bottom */
.player-dock {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1200;
    padding: 0;
    margin: 0;
}

.player-fixed {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1200;
    padding: 0;
    margin: 0;
}

::deep .player-inner-container {
    padding: 0 0.75rem 0.75rem 0.75rem;
}

/* The visible surface is a MudPaper; scoped CSS only sets geometry + a hairline accent */
::deep .player-surface {
    position: relative;
    border-radius: 16px;
    border: 1px solid var(--mud-palette-primary);
    overflow: hidden;
    margin-bottom: 1rem;
}

/* Minimize / close cluster, pinned top-right of the surface */
::deep .player-surface .player-window-controls {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

/* PLAYER-BAR play-chip override (Phase 18, T3). PlayStateIcon's chip defaults to the solid
   --deepdrft-play-chip (moss-green in dark) used on release heroes and Cut track rows. On the
   bright player dock that solid green reads too hot, so here — and only here — swap to the
   translucent --deepdrft-play-chip-soft (same green, much less opaque). The glyph stays the
   palette green/primary on this context (the navy default-glyph would vanish on the translucent
   wash), so we let MudIconButton's own Color.Primary stand by neutralising the default override. */
::deep .player-surface .icon-container {
    background-color: var(--deepdrft-play-chip-soft);
}

::deep .player-surface .icon-container .mud-icon-button {
    color: var(--mud-palette-primary);
}

/* Minimized floating dock — positioning + hover only; colour from MudFab */
.minimized-dock {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1300;
}

.minimized-dock:hover {
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .minimized-dock {
        bottom: 15px;
        right: 15px;
    }

    ::deep .player-surface {
        margin-bottom: 0.5rem;
    }
}

/* Unified responsive player layout — CSS Grid with named areas redefined per breakpoint.
   The metadata (meta-zone) detaches from the waveform (seek-zone) in the mid band, which a
   flex order-swap can't express, so each of the four zones is placed by grid-area and the three
   shapes are pure template-area swaps — no runtime breakpoint subscription. min-width:0 on the
   shrinkable centre zones lets the title truncate and the waveform shrink instead of overflowing. */
.player-layout {
    display: grid;
    align-items: center;
    gap: 8px;
    /*padding-right: 2.5rem; !* clear the abs-positioned PlayerWindowControls *!*/
}

::deep .transport-zone { grid-area: transport; }
::deep .meta-zone      { grid-area: meta; min-width: 0; }
::deep .seek-zone      { grid-area: waveform; min-width: 0; }
::deep .volume-zone    { grid-area: volume; }

/* Wide (>= 900px): single row — transport and volume flank the centre column; the metadata
   sits directly under the waveform (transport/volume span both rows, centred). */
@media (min-width: 900px) {
    .player-layout {
        grid-template-columns: auto minmax(360px, 1fr) auto;
        grid-template-areas:
            "transport waveform volume"
            "transport meta     .";
    }
}

/* Mid (600–900px): metadata rides the top row between transport and volume; the waveform gets
   the whole bottom row to itself rather than being squeezed beside the metadata. */
@media (min-width: 600px) and (max-width: 899.98px) {
    .player-layout {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "transport meta     volume"
            "waveform  waveform waveform";
    }
}

/* Narrow (< 600px): transport + volume share the top row; waveform then metadata stack full-width
   below — the most compressed shape. */
@media (min-width: 420px) and (max-width: 599.98px) {
    .player-layout {
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "transport .        volume"
            "waveform  waveform waveform"
            "meta      meta     meta";
    }
}

/* Very Narrow (< 400px): transport + volume share the top row; waveform then metadata stack full-width
   below — the most compressed shape. */
@media (max-width: 419.98px) {
    .player-layout {
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "transport .        volume"
            "waveform  waveform waveform"
            "meta      meta     meta";
    }
}