/** * Радио-страница: общий файл, подключается из base.html, чтобы при HTMX-swap * контуры плеера и блоков оставались в (стили уже загружены). */ .radio-studio-intro { color: var(--color-text-muted); } .radio-studio-card { background: color-mix(in srgb, var(--color-card) 82%, transparent); border: 1px solid color-mix(in srgb, var(--color-header-border) 85%, transparent); border-radius: 1.5rem; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12); } :root[data-theme="dark"] .radio-studio-card { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); } .radio-cover-frame { position: relative; aspect-ratio: 1 / 1; width: 100%; overflow: hidden; border-radius: 1.1rem; background: linear-gradient( 145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02) ); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 12px 40px rgba(0, 0, 0, 0.25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .radio-viz-wrap { border-radius: 0.85rem; padding: 1px; background: linear-gradient( 135deg, rgba(201, 162, 74, 0.45), rgba(240, 213, 106, 0.22), rgba(166, 124, 47, 0.38) ); box-shadow: 0 0 40px color-mix(in srgb, #c9a24a 14%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.12); } .radio-viz-canvas { display: block; width: 100%; height: 6rem; border-radius: 0.8rem; background: linear-gradient( 165deg, color-mix(in srgb, #1a1510 72%, transparent), color-mix(in srgb, #2a2218 88%, transparent) ); } :root[data-theme="light"] .radio-viz-canvas { background: linear-gradient( 165deg, color-mix(in srgb, #c9a24a 8%, transparent), color-mix(in srgb, var(--color-media-placeholder) 55%, transparent) ); } .radio-viz-wrap .radio-viz-canvas { border-radius: 0 0 0.8rem 0.8rem; } .radio-studio-live-dot { box-shadow: 0 0 0 4px color-mix(in srgb, #ef4444 22%, transparent); animation: radio-live-pulse 2s ease-in-out infinite; } @keyframes radio-live-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.65; transform: scale(0.92); } } @keyframes radio-cover-in { from { opacity: 0; transform: translateY(14px) scale(1.04); } to { opacity: 1; transform: translateY(0) scale(1); } } .radio-cover-frame img.radio-art-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transform-origin: center bottom; will-change: opacity, transform; } .radio-art-await { opacity: 0; transform: translateY(14px) scale(1.04); } .radio-cover-enter { animation: radio-cover-in 0.58s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .radio-control-btn { width: 3.25rem; height: 3.25rem; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-brand); color: #fff; border: none; cursor: pointer; transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease; box-shadow: 0 6px 20px color-mix(in srgb, var(--color-brand) 45%, transparent); } .radio-control-btn:hover { filter: brightness(1.06); transform: scale(1.04); } .radio-control-btn:active { transform: scale(0.98); } .radio-volume { -webkit-appearance: none; appearance: none; height: 6px; border-radius: 9999px; background: color-mix(in srgb, var(--color-text-muted) 35%, transparent); flex: 1; min-width: 6rem; max-width: 14rem; } .radio-volume::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--color-brand); cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } .radio-volume::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--color-brand); border: 0; cursor: pointer; } .radio-block-card { border-radius: 1.25rem; background: var(--color-panel-warm); border: 1px solid color-mix(in srgb, var(--color-header-border) 70%, transparent); box-shadow: var(--shadow-card, 0 6px 24px rgba(0, 0, 0, 0.06)); } .radio-shoutout-input { width: 100%; border-radius: 0.75rem; border: 1px solid var(--color-header-border); background: var(--color-card); color: var(--color-text-primary); padding: 0.6rem 0.85rem; font-size: 0.95rem; } .radio-shoutout-input:focus { outline: 2px solid color-mix(in srgb, var(--color-brand) 55%, transparent); outline-offset: 1px; } .radio-meta-lines { transition: opacity 0.35s ease; } .radio-toast { position: fixed; bottom: 6.5rem; left: 50%; transform: translateX(-50%) translateY(120%); z-index: 80; max-width: min(92vw, 22rem); padding: 0.85rem 1.25rem; border-radius: 9999px; font-size: 0.9375rem; font-weight: 600; color: #fff; background: linear-gradient( 135deg, color-mix(in srgb, var(--color-brand) 92%, black), color-mix(in srgb, var(--color-brand) 70%, black) ); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25); opacity: 0; visibility: hidden; transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.45s; } .radio-toast.radio-toast-visible { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .radio-toast.radio-toast-error { background: linear-gradient(135deg, #991b1b, #7f1d1d); box-shadow: 0 12px 36px rgba(127, 29, 29, 0.35); } .radio-recent-list li { transition: opacity 0.35s ease, transform 0.35s ease; } .radio-honeypot { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .radio-podcast-row { display: flex; flex-direction: column; gap: 0.5rem; } @media (min-width: 640px) { .radio-podcast-row { flex-direction: row; align-items: center; justify-content: space-between; } } .radio-podcast-mini { height: 2.25rem; width: 100%; max-width: 20rem; border-radius: 0.5rem; }