/* ================================================================ SONGLR — Mobile & Tablet Responsive Enhancement Include AFTER app.css in ================================================================ */ /* ── CSS Custom Properties ──────────────────────────────────────── */ :root { --bottom-nav-h: 58px; --mobile-player-h: 64px; --drawer-w: 82vw; --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); } /* ================================================================ MOBILE BOTTOM NAVIGATION BAR ================================================================ */ .mobile-bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; height: calc(var(--bottom-nav-h) + var(--safe-b)); padding-bottom: var(--safe-b); background: color-mix(in srgb, var(--bg2) 96%, transparent); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-top: 1px solid var(--border2); z-index: 860; justify-content: space-around; align-items: flex-start; padding-top: 6px; } .mbn-item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 14px; color: var(--text3); font-size: .6rem; font-weight: 600; letter-spacing: .03em; transition: color .18s ease; text-decoration: none; position: relative; min-width: 48px; -webkit-tap-highlight-color: transparent; user-select: none; } .mbn-item i { font-size: 1.2rem; display: block; transition: transform .18s ease; } .mbn-item.active { color: var(--primary); } .mbn-item.active i { transform: scale(1.1); } .mbn-item:active i { transform: scale(.9); } /* Active pip indicator */ .mbn-item.active::after { content: ''; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--primary); opacity: .7; } /* Notif badge on bottom nav */ .mbn-item .mbn-badge { position: absolute; top: 4px; right: 8px; background: var(--primary); color: #fff; font-size: .52rem; font-weight: 700; border-radius: 99px; min-width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; padding: 0 4px; border: 2px solid var(--bg2); } /* ================================================================ MOBILE MINI PLAYER (sits above bottom nav on mobile) ================================================================ */ .mobile-mini-player { display: none; position: fixed; left: 10px; right: 10px; bottom: calc(var(--bottom-nav-h) + var(--safe-b) + 6px); height: var(--mobile-player-h); background: color-mix(in srgb, var(--bg3) 98%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border2); border-radius: 16px; z-index: 855; align-items: center; gap: 10px; padding: 0 12px; box-shadow: 0 8px 32px rgba(0,0,0,.45); cursor: pointer; -webkit-tap-highlight-color: transparent; overflow: hidden; } /* Progress bar stripe at bottom of mini player */ .mobile-mini-player::after { content: ''; position: absolute; bottom: 0; left: 0; height: 2px; width: var(--pb-pct, 0%); background: var(--primary); border-radius: 0 2px 2px 0; transition: width .5s linear; pointer-events: none; } .mmp-cover { width: 42px; height: 42px; border-radius: 10px; object-fit: cover; background: var(--bg4); flex-shrink: 0; } .mmp-cover-ph { width: 42px; height: 42px; border-radius: 10px; background: var(--bg4); display: flex; align-items: center; justify-content: center; color: var(--text3); font-size: .95rem; flex-shrink: 0; } .mmp-meta { flex: 1; min-width: 0; } .mmp-song { font-size: .82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); } .mmp-artist { font-size: .7rem; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; } .mmp-btns { display: flex; align-items: center; gap: 2px; flex-shrink: 0; } .mmp-btn { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text2); font-size: 1rem; transition: all .15s; -webkit-tap-highlight-color: transparent; } .mmp-btn:active { transform: scale(.87); } .mmp-play { background: var(--primary); color: #fff !important; width: 40px; height: 40px; font-size: .95rem; } .mmp-play:active { background: var(--primary-dark) !important; } /* ================================================================ MOBILE FULL-SCREEN PLAYER MODAL ================================================================ */ .mobile-player-modal { display: none; position: fixed; inset: 0; z-index: 999; background: var(--bg); flex-direction: column; overflow: hidden; } .mobile-player-modal.open { display: flex; animation: mpmSlideUp .32s cubic-bezier(.25,.46,.45,.94) both; } @keyframes mpmSlideUp { from { transform: translateY(100%); opacity: .6; } to { transform: translateY(0); opacity: 1; } } .mobile-player-modal.closing { animation: mpmSlideDown .26s cubic-bezier(.55,.06,.68,.19) both; } @keyframes mpmSlideDown { from { transform: translateY(0); opacity: 1; } to { transform: translateY(100%); opacity: 0; } } /* Drag handle */ .mpm-handle-wrap { display: flex; justify-content: center; padding: 14px 0 4px; flex-shrink: 0; } .mpm-handle { width: 36px; height: 4px; border-radius: 2px; background: var(--border2); } /* Header row */ .mpm-header { display: flex; align-items: center; justify-content: space-between; padding: 0 20px 8px; flex-shrink: 0; } .mpm-close { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text2); font-size: 1.1rem; background: var(--surface); -webkit-tap-highlight-color: transparent; } .mpm-now-label { font-size: .72rem; color: var(--text2); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } /* Album art */ .mpm-art-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 12px 32px; min-height: 0; } .mpm-art { width: 100%; max-width: 300px; aspect-ratio: 1; border-radius: 20px; object-fit: cover; box-shadow: 0 20px 60px rgba(0,0,0,.55); background: var(--bg3); } .mpm-art-ph { width: 100%; max-width: 300px; aspect-ratio: 1; border-radius: 20px; background: var(--bg3); display: flex; align-items: center; justify-content: center; color: var(--text3); font-size: 4rem; box-shadow: 0 20px 60px rgba(0,0,0,.55); } /* Song info */ .mpm-info { padding: 16px 28px 10px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .mpm-titles { flex: 1; min-width: 0; } .mpm-song { font-size: 1.2rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; } .mpm-artist { font-size: .9rem; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mpm-like { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text3); font-size: 1.3rem; flex-shrink: 0; transition: color .18s; -webkit-tap-highlight-color: transparent; } .mpm-like.liked { color: var(--primary); } .mpm-like:active { transform: scale(.85); } /* Progress */ .mpm-progress-wrap { padding: 4px 28px 12px; flex-shrink: 0; } .mpm-track { height: 4px; background: var(--bg4); border-radius: 2px; cursor: pointer; position: relative; margin-bottom: 8px; touch-action: none; } .mpm-fill { height: 100%; background: var(--primary); border-radius: 2px; width: 0%; transition: width .5s linear; pointer-events: none; } .mpm-dot { position: absolute; top: 50%; right: calc(100% - var(--pb-pct, 0%)); transform: translate(50%, -50%); width: 14px; height: 14px; border-radius: 50%; background: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.4); pointer-events: none; transition: right .5s linear; } .mpm-times { display: flex; justify-content: space-between; font-size: .72rem; color: var(--text3); } /* Controls */ .mpm-controls { padding: 0 20px 18px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .mpm-ctrl { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text2); font-size: 1.1rem; -webkit-tap-highlight-color: transparent; transition: all .15s; } .mpm-ctrl:active { transform: scale(.85); } .mpm-ctrl.active { color: var(--primary); } .mpm-play-big { width: 66px; height: 66px; background: var(--primary); color: #fff !important; font-size: 1.5rem; box-shadow: 0 6px 24px color-mix(in srgb, var(--primary) 40%, transparent); } .mpm-play-big:active { transform: scale(.93); background: var(--primary-dark) !important; } /* Extra actions row */ .mpm-actions { padding: 0 20px calc(18px + var(--safe-b)); display: flex; justify-content: space-around; flex-shrink: 0; } .mpm-action { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text3); font-size: .9rem; background: var(--surface); -webkit-tap-highlight-color: transparent; transition: all .15s; } .mpm-action:active { transform: scale(.85); background: var(--surface2); } .mpm-action.active { color: var(--primary); } /* ================================================================ MOBILE SEARCH DRAWER ================================================================ */ .mobile-search-overlay { display: none; position: fixed; inset: 0; z-index: 950; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .mobile-search-overlay.open { display: block; animation: fadeIn .15s ease; } .mobile-search-drawer { position: absolute; top: 0; left: 0; right: 0; background: var(--bg2); border-bottom: 1px solid var(--border2); border-radius: 0 0 20px 20px; padding: 12px 16px 16px; box-shadow: 0 16px 48px rgba(0,0,0,.5); animation: drawerDown .2s cubic-bezier(.25,.46,.45,.94) both; } @keyframes drawerDown { from { transform: translateY(-100%); } to { transform: translateY(0); } } .msd-input-row { display: flex; align-items: center; gap: 10px; } .msd-back { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text2); font-size: 1rem; flex-shrink: 0; -webkit-tap-highlight-color: transparent; } .msd-box { flex: 1; position: relative; display: flex; align-items: center; } .msd-box i.fa-search { position: absolute; left: 14px; color: var(--text3); font-size: .85rem; pointer-events: none; } .msd-box input { width: 100%; padding: 11px 16px 11px 40px; background: var(--surface); border: 1px solid var(--border2); border-radius: 12px; color: var(--text); font-size: .95rem; outline: none; font-family: inherit; } .msd-box input:focus { border-color: var(--primary); } .msd-results { max-height: 60vh; overflow-y: auto; margin-top: 8px; } /* ================================================================ MOBILE SIDEBAR DRAWER ================================================================ */ .sidebar-drawer-overlay { display: none; position: fixed; inset: 0; z-index: 810; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .sidebar-drawer-overlay.open { display: block; animation: fadeIn .2s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .sidebar-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: min(var(--drawer-w), 300px); background: var(--bg2); border-right: 1px solid var(--border2); z-index: 820; overflow-y: auto; transform: translateX(-100%); transition: transform .28s cubic-bezier(.25,.46,.45,.94); padding-top: calc(var(--nav-h) + 8px); padding-bottom: calc(var(--bottom-nav-h) + 16px); } .sidebar-drawer.open { transform: translateX(0); } /* ================================================================ GENERAL MOBILE TWEAKS (≤ 860px) ================================================================ */ @media (max-width: 860px) { /* ── Prevent ALL horizontal overflow at root level ── */ html { overflow-x: hidden; max-width: 100vw; } /* ── Fix box-sizing so padding never causes overflow ── */ .container, .container-sm, .container-xs, .main-area, .app-shell, .page-wrap, .section { box-sizing: border-box; max-width: 100%; } /* ── Show mobile bottom nav ── */ .mobile-bottom-nav { display: flex; } /* ── Hide desktop player, show mini player ── */ .player-bar { display: none !important; } .mobile-mini-player { display: flex; } /* ── Body padding adjustments ── */ body.has-player { padding-bottom: calc(var(--mobile-player-h) + var(--bottom-nav-h) + var(--safe-b) + 12px); } body:not(.has-player) { padding-bottom: calc(var(--bottom-nav-h) + var(--safe-b)); } /* ── Hide desktop nav links (shown in bottom nav) ── */ .nav-links { display: none !important; } .nav-hamburger { display: none !important; } /* ── Navbar compact ── */ .nav-inner { gap: 10px; padding: 0 16px; } .nav-search { display: flex; flex: 1; max-width: none; } /* ── Mobile search button in nav (visible < 640px) ── */ .nav-search-btn { display: flex; } /* ── Grids ── */ .grid-6 { grid-template-columns: repeat(3, 1fr) !important; } .grid-5 { grid-template-columns: repeat(3, 1fr) !important; } .grid-4 { grid-template-columns: repeat(2, 1fr) !important; } /* ── Artist hero ── */ .artist-hero { min-height: 260px; } /* ── Queue panel ── */ .queue-panel { width: 100%; right: -100%; border-radius: 20px 20px 0 0; border-left: none; border-top: 1px solid var(--border2); top: auto; bottom: calc(var(--mobile-player-h) + var(--bottom-nav-h) + var(--safe-b) + 12px); max-height: 72vh; } .queue-panel.open { right: 0; } /* ── Two-col layouts collapse ── */ .two-col, .two-col-wide { grid-template-columns: 1fr; gap: 20px; } .two-col aside, .two-col-wide aside { display: none; } /* ── Section headings ── */ .section-hd { margin-bottom: 16px; } .section-title { font-size: 1.1rem; } /* ── Toast position ── */ .toast, .gj-toast-container { bottom: calc(var(--mobile-player-h) + var(--bottom-nav-h) + var(--safe-b) + 20px) !important; } /* ── Profile hero ── */ .profile-hero { flex-direction: column; text-align: center; } .profile-stats { justify-content: center; } /* ── Hero sections ── */ .hero { min-height: 300px; } .hero-content { padding: 24px 20px; } /* ── Playlist / artist hero ── */ .playlist-hero { flex-direction: column; } .playlist-hero img { width: 150px; height: 150px; margin: 0 auto; } .artist-profile-hero { flex-direction: column; align-items: center; text-align: center; } .artist-profile-btns { justify-content: center; } .artist-profile-tags { justify-content: center; } /* ── Containers ── */ .container { padding: 0 16px; } .container-sm, .container-xs { padding: 0 16px; } } /* ================================================================ TABLET (640px – 860px) SPECIFIC ================================================================ */ @media (min-width: 641px) and (max-width: 860px) { .grid-6 { grid-template-columns: repeat(4, 1fr) !important; } .grid-5 { grid-template-columns: repeat(3, 1fr) !important; } .grid-4 { grid-template-columns: repeat(3, 1fr) !important; } .grid-3 { grid-template-columns: repeat(3, 1fr) !important; } } /* ================================================================ PHONE (≤ 640px) ================================================================ */ @media (max-width: 640px) { /* ── Nav: hide text search, show search icon only ── */ .nav-search { display: none; } .nav-search-btn { display: flex !important; } /* ── Navbar height ── */ :root { --nav-h: 56px; } .nav-inner { padding: 0 14px; } /* ── Logo: hide ".com" suffix ── */ .logo-domain { display: none; } /* ── Grids ── */ .grid-6, .grid-5, .grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr) !important; } .grid-2 { grid-template-columns: repeat(2, 1fr) !important; } /* ── Music card compact ── */ .music-card-title { font-size: .82rem; } .music-card-sub { font-size: .7rem; } /* ── Song row compact ── */ .song-row-num { display: none; } .chart-thumb { width: 44px; height: 44px; } /* ── Artist hero ── */ .artist-hero { min-height: 200px; } .artist-profile-avatar { width: 86px; height: 86px; } .artist-profile-name { font-size: 1.5rem; } /* ── Section ── */ .section { padding: 24px 0; } /* ── Page title ── */ h1 { font-size: 1.5rem; } h2 { font-size: 1.2rem; } /* ── Table cells ── */ td, th { padding: 10px 10px; } /* ── Settings page ── */ .settings-wrap { padding: 16px; } .settings-row { flex-direction: column; align-items: flex-start; gap: 8px; } /* ── Charts page ── */ .chart-title { font-size: .82rem; } .chart-sub { font-size: .72rem; } .chart-plays { display: none; } /* ── Profile page ── */ .profile-avatar { width: 68px; height: 68px; } .profile-tabs { gap: 0; } .profile-tab { padding: 10px 14px; font-size: .8rem; } /* ── Buttons ── */ .btn { padding: 10px 18px; font-size: .82rem; } .btn-lg { padding: 12px 24px; font-size: .9rem; } /* ── Form ── */ .form-row { grid-template-columns: 1fr; } /* ── Notif dropdown ── */ .notif-drop { position: fixed; top: var(--nav-h); left: 8px; right: 8px; width: auto; border-radius: 16px; } /* ── User dropdown ── */ .user-drop { position: fixed; top: var(--nav-h); right: 8px; left: 8px; width: auto; border-radius: 16px; } } /* ================================================================ SMALL PHONE (≤ 420px) ================================================================ */ @media (max-width: 420px) { .mbn-item { padding: 6px 8px; } .mbn-item span { display: none; } /* icon-only bottom nav on tiny screens */ .mpm-art { max-width: 240px; } .mpm-song { font-size: 1.05rem; } .mpm-controls { padding: 0 12px 14px; } .mpm-play-big { width: 58px; height: 58px; font-size: 1.3rem; } } /* ================================================================ MOBILE-ONLY NAV SEARCH BUTTON ================================================================ */ .nav-search-btn { display: none; width: 38px; height: 38px; border-radius: 50%; align-items: center; justify-content: center; color: var(--text2); font-size: 1rem; background: var(--surface); flex-shrink: 0; -webkit-tap-highlight-color: transparent; } .nav-search-btn:hover { background: var(--surface2); color: var(--text); } /* ================================================================ TOAST / SNACKBAR — override for mobile ================================================================ */ @media (max-width: 860px) { .gj-toast { left: 16px !important; right: 16px !important; transform: none !important; border-radius: 12px !important; bottom: calc(var(--mobile-player-h) + var(--bottom-nav-h) + var(--safe-b) + 20px) !important; } } /* ================================================================ TOUCH IMPROVEMENTS ================================================================ */ @media (hover: none) and (pointer: coarse) { /* Larger tap targets */ .btn { min-height: 44px; } .btn-sm { min-height: 38px; } .nav-link { min-height: 44px; } a { -webkit-tap-highlight-color: transparent; } button { -webkit-tap-highlight-color: transparent; } /* Remove hover effects that look odd on touch */ .music-card:hover { transform: none; } .music-card:active { transform: scale(.97); } /* Scrolling areas */ .search-dropdown { -webkit-overflow-scrolling: touch; } .notif-drop { -webkit-overflow-scrolling: touch; } .queue-panel { -webkit-overflow-scrolling: touch; } /* Disable hover transforms on touch */ .btn-primary:hover { transform: none; box-shadow: none; } } /* ================================================================ LANDSCAPE PHONE ================================================================ */ @media (max-height: 500px) and (max-width: 860px) and (orientation: landscape) { .mpm-art-wrap { padding: 6px 28px; } .mpm-art { max-width: 140px; } .mobile-player-modal { flex-direction: row; flex-wrap: wrap; } .mpm-handle-wrap { display: none; } .mpm-art-wrap { width: 40%; flex: none; } .mpm-info, .mpm-progress-wrap, .mpm-controls, .mpm-actions { width: 60%; flex: none; } :root { --bottom-nav-h: 48px; } } /* ================================================================ VIDEO PANEL — Mobile: centered above bottom nav ================================================================ */ @media (max-width: 860px) { #ytWrap.yt-visible { /* Center horizontally; sit above mini player + bottom nav */ right: auto !important; left: 50% !important; transform: translateX(-50%) !important; width: calc(100vw - 24px) !important; max-width: 420px !important; bottom: calc(var(--mobile-player-h) + var(--bottom-nav-h) + var(--safe-b) + 16px) !important; } /* Full-width iframe */ #ytPlayer, #ytPlayer iframe { width: 100% !important; } /* Click shield matches full width */ #ytVidShield { width: 100% !important; } /* Lyrics in normal (non-fullscreen) panel on mobile: compact */ #ytVidLyrics { max-height: 30vh !important; overflow-y: auto !important; } #ytVidLyricsText { font-size: .82rem !important; line-height: 1.6 !important; } } /* ── Fullscreen: lyrics text smaller so more lines visible ─────── */ #ytWrap:fullscreen #ytVidLyricsText, #ytWrap:-webkit-full-screen #ytVidLyricsText { font-size: .72rem !important; line-height: 1.55 !important; letter-spacing: .01em; } /* Fullscreen both-mode: video takes fixed height, lyrics get the rest */ #ytWrap:fullscreen.fs-mode-both, #ytWrap:-webkit-full-screen.fs-mode-both { flex-direction: column !important; } #ytWrap:fullscreen.fs-mode-both #ytPlayerWrap, #ytWrap:-webkit-full-screen.fs-mode-both #ytPlayerWrap { height: 45vh !important; flex: none !important; width: 100% !important; } #ytWrap:fullscreen.fs-mode-both #ytPlayer, #ytWrap:-webkit-full-screen.fs-mode-both #ytPlayer, #ytWrap:fullscreen.fs-mode-both #ytPlayer iframe, #ytWrap:-webkit-full-screen.fs-mode-both #ytPlayer iframe { width: 100% !important; height: 100% !important; } #ytWrap:fullscreen.fs-mode-both #ytVidLyrics, #ytWrap:-webkit-full-screen.fs-mode-both #ytVidLyrics { flex: 1 !important; overflow-y: auto !important; padding: 6px 14px !important; display: flex !important; } /* Fullscreen lyrics-only: readable but compact */ #ytWrap:fullscreen.fs-mode-lyrics #ytVidLyricsText, #ytWrap:-webkit-full-screen.fs-mode-lyrics #ytVidLyricsText { font-size: .8rem !important; max-width: 560px; margin: 0 auto; line-height: 1.65 !important; } /* ================================================================ APP-SHELL LAYOUT HELPERS ================================================================ */ /* Ensure app-shell fills height without overflow on mobile */ @media (max-width: 860px) { .app-shell { min-height: calc(100vh - var(--nav-h)); overflow-x: hidden; } .main-area { overflow-x: hidden; } /* Hide desktop sidebar on mobile (use drawer instead) */ .sidebar, .app-sidebar, .left-sidebar { display: none !important; } } /* ================================================================ PLAYER BAR — desktop only ================================================================ */ @media (min-width: 861px) { .mobile-bottom-nav { display: none !important; } .mobile-mini-player { display: none !important; } .mobile-player-modal { display: none !important; } } /* ================================================================ CARD SWIPE ROW — horizontal scroll on mobile ================================================================ */ @media (max-width: 640px) { /* Allow horizontal card rows to scroll */ .scroll-row { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; } .scroll-row > * { scroll-snap-align: start; flex-shrink: 0; width: calc(50vw - 24px); max-width: 180px; } } /* ================================================================ RIPPLE EFFECT — for touch feedback ================================================================ */ .ripple-host { position: relative; overflow: hidden; } .ripple { position: absolute; border-radius: 50%; transform: scale(0); animation: rippleAnim .5s linear; background: rgba(255,255,255,.18); pointer-events: none; } @keyframes rippleAnim { to { transform: scale(3); opacity: 0; } } /* ================================================================ PULL-TO-REFRESH INDICATOR ================================================================ */ .ptr-indicator { position: fixed; top: var(--nav-h); left: 50%; transform: translateX(-50%) translateY(-60px); width: 38px; height: 38px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border2); display: flex; align-items: center; justify-content: center; color: var(--text2); font-size: .9rem; z-index: 905; transition: transform .3s ease; box-shadow: var(--shadow); } .ptr-indicator.visible { transform: translateX(-50%) translateY(10px); } .ptr-indicator.spinning i { animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ================================================================ IMPROVED SCROLLBAR (mobile) ================================================================ */ @media (max-width: 860px) { ::-webkit-scrollbar { width: 0; height: 0; } } /* ================================================================ MOBILE FIX ADDITIONS v2 ================================================================ */ /* ── Sidebar drawer: ensure padding matches nav + bottom nav ── */ .sidebar-drawer { padding-top: calc(var(--nav-h, 64px) + 8px) !important; padding-bottom: calc(var(--bottom-nav-h) + 16px) !important; } /* ── Guest body: no player padding until player activates ────── */ body.logged-out:not(.has-player) { padding-bottom: calc(var(--bottom-nav-h) + var(--safe-b)) !important; } /* ── Mobile mini player: show flex by default for all users ──── */ @media (max-width: 860px) { /* When player has no song yet, keep it hidden — JS controls display */ .mobile-mini-player[style*="display: none"], .mobile-mini-player[style*="display:none"] { display: none !important; } } /* ================================================================ HOME PAGE — Fix inline hardcoded grids ================================================================ */ @media (max-width: 860px) { /* 4-col inline grids (home.php top artists section) */ [style*="grid-template-columns:repeat(4,1fr)"], [style*="grid-template-columns: repeat(4, 1fr)"], [style*="grid-template-columns:repeat(4, 1fr)"], [style*="grid-template-columns: repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; } /* 3-col inline grids (home.php albums section) */ [style*="grid-template-columns:repeat(3,1fr)"], [style*="grid-template-columns: repeat(3, 1fr)"], [style*="grid-template-columns:repeat(3, 1fr)"], [style*="grid-template-columns: repeat(3,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; } /* 5-col, 6-col grids */ [style*="grid-template-columns:repeat(5,1fr)"], [style*="grid-template-columns: repeat(5, 1fr)"], [style*="grid-template-columns:repeat(6,1fr)"], [style*="grid-template-columns: repeat(6, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; } /* Any fixed pixel-width column grids */ [style*="grid-template-columns"]:not([class*="grid-"]) { max-width: 100%; } } @media (max-width: 480px) { /* Collapse to 2-col on small phones for auto-fill grids */ [style*="grid-template-columns:repeat(auto-fill,minmax(140px"], [style*="grid-template-columns:repeat(auto-fill,minmax(160px"], [style*="grid-template-columns: repeat(auto-fill"] { grid-template-columns: repeat(2, 1fr) !important; } } /* ================================================================ SONG PAGE — Fix 2-column inline grid ================================================================ */ @media (max-width: 860px) { .song-page-grid, [style*="grid-template-columns:1fr 340px"], [style*="grid-template-columns: 1fr 340px"] { grid-template-columns: 1fr !important; gap: 24px !important; } /* Hide right sidebar on song page on mobile */ .song-page-grid > *:last-child, [style*="grid-template-columns:1fr 340px"] > *:last-child { display: none !important; } } /* ================================================================ ALBUM PAGE — Ensure break at 860px not just 900px ================================================================ */ @media (max-width: 860px) { .album-page-grid { grid-template-columns: 1fr !important; } .album-page-sidebar { display: none !important; } } /* ================================================================ ARTIST PAGE — Hero & content fixes ================================================================ */ @media (max-width: 860px) { /* Artist header info */ .artist-profile-hero { padding: 20px 16px !important; gap: 16px !important; } /* Stats row on artist */ .artist-profile-stats { flex-wrap: wrap; gap: 12px !important; } /* Artist song list */ .song-row { padding: 8px 12px !important; } .song-row-num { display: none; } /* ── Artist hero: fix overflow ─────────────────── */ /* Both naming conventions used in the codebase */ .artist-hero { min-height: 220px !important; padding-bottom: 20px !important; overflow: hidden; width: 100%; } /* Stack avatar + info vertically — covers both class names */ .artist-hero-inner, .artist-hero-content { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; padding: 0 16px !important; width: 100%; box-sizing: border-box; } /* Avatar smaller on mobile */ .artist-big-img { width: 90px !important; height: 90px !important; flex-shrink: 0; } /* Hero meta: shrink heading, don't overflow */ .artist-hero-meta { min-width: 0; width: 100%; } .artist-hero-meta h1 { font-size: 1.4rem !important; white-space: normal; word-break: break-word; } /* Stats: wrap tightly */ .artist-stats { gap: 14px !important; margin: 8px 0 !important; flex-wrap: wrap !important; } /* Follow/share buttons: wrap & full-width */ .hero-actions { flex-wrap: wrap !important; gap: 8px !important; width: 100%; } .hero-actions .btn { flex: 1 1 auto; min-width: 100px; max-width: 48%; text-align: center; justify-content: center; box-sizing: border-box; } /* Tags: allow wrapping */ .tag-list { flex-wrap: wrap !important; gap: 6px !important; max-width: 100%; } /* Artist page grid: single column */ .artist-page-grid { grid-template-columns: 1fr !important; gap: 16px !important; } /* Artist albums grid: 3 columns on tablet */ .artist-albums-grid { grid-template-columns: repeat(3, 1fr) !important; } /* Artist tabs: horizontal scroll */ .artist-tabs, .artist-nav-tabs { overflow-x: auto !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex-wrap: nowrap !important; gap: 0 !important; padding-bottom: 2px; width: 100%; box-sizing: border-box; } .artist-tabs::-webkit-scrollbar, .artist-nav-tabs::-webkit-scrollbar { display: none; } .artist-tab, .artist-nav-tab { white-space: nowrap; flex-shrink: 0; } /* Artist bio: readable on mobile */ .artist-bio { font-size: .88rem !important; max-width: 100%; overflow-wrap: break-word; } /* Section inside artist page */ .artist-page-section { padding: 16px 0 !important; } } @media (max-width: 640px) { /* Even smaller avatar */ .artist-big-img { width: 72px !important; height: 72px !important; } /* Artist albums: 2 col on phone */ .artist-albums-grid { grid-template-columns: repeat(2, 1fr) !important; } /* Artist hero heading smaller */ .artist-hero-meta h1 { font-size: 1.15rem !important; } /* Hide plays count on song rows */ .song-row-plays, .artist-song-plays { display: none !important; } } /* ================================================================ PROFILE PAGE — Mobile layout ================================================================ */ @media (max-width: 640px) { .profile-hero { flex-direction: column; text-align: center; gap: 12px !important; } .profile-stats { justify-content: center; flex-wrap: wrap; gap: 12px !important; } .profile-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 0; padding-bottom: 2px; } .profile-tabs::-webkit-scrollbar { display: none; } .profile-tab { white-space: nowrap; flex-shrink: 0; padding: 10px 16px; font-size: .8rem; } } /* ================================================================ LANDING PAGE — Guest homepage fixes ================================================================ */ @media (max-width: 640px) { /* Chart tabs horizontal scroll */ .chart-tab-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; gap: 4px; flex-wrap: nowrap !important; } .chart-tab-nav::-webkit-scrollbar { display: none; } .chart-tab-btn { white-space: nowrap; flex-shrink: 0; font-size: .78rem; padding: 7px 14px; } /* Song rows on landing */ .song-row { padding: 8px 0 !important; } .song-row-plays { display: none; } /* Features grid */ .features-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; } /* Stats strip */ .stats-strip { gap: 12px !important; flex-wrap: wrap; justify-content: center; } } /* ================================================================ CHARTS PAGE — Mobile table/grid ================================================================ */ @media (max-width: 640px) { .chart-plays { display: none !important; } .chart-title { font-size: .82rem; } .chart-sub { font-size: .72rem; } } /* ================================================================ DISCOVER PAGE — Mobile fix ================================================================ */ @media (max-width: 640px) { .grid-3 { grid-template-columns: repeat(2, 1fr) !important; } } /* ================================================================ PLAYLISTS / SONGS / ALBUMS INDEX PAGES ================================================================ */ @media (max-width: 640px) { .grid-4, .grid-5, .grid-6 { grid-template-columns: repeat(2, 1fr) !important; } /* Page headers */ .page-header-row { flex-direction: column; align-items: flex-start; gap: 12px; } } /* ================================================================ NAV: Hide sidebar toggle on mobile (drawer handles it now) ================================================================ */ @media (max-width: 860px) { .sidebar-toggle-btn { display: flex !important; /* keep visible — now opens drawer */ } } /* ================================================================ SEARCH PAGE — Mobile fix ================================================================ */ @media (max-width: 640px) { .search-results-wrap { grid-template-columns: 1fr !important; } } /* ================================================================ CARD / MUSIC-CARD — Ensure proper sizing on mobile ================================================================ */ @media (max-width: 640px) { .music-card { min-width: 0; } .music-card .card-thumb, .music-card .card-cover { width: 100%; aspect-ratio: 1; height: auto; } } /* ================================================================ TWO-COL WIDE: home feed + sidebar fix ================================================================ */ @media (max-width: 860px) { .two-col-wide { grid-template-columns: 1fr !important; } .two-col-wide > aside { display: none !important; } } /* ================================================================ PLAYER BAR: On mobile when logged out, still hide desktop bar ================================================================ */ @media (max-width: 860px) { .logged-out .player-bar, .logged-in .player-bar { display: none !important; } } /* ================================================================ SIDEBAR DRAWER: Proper z-index and styling ================================================================ */ @media (min-width: 861px) { /* On desktop, don't show drawer overlay */ .sidebar-drawer-overlay, .sidebar-drawer { display: none !important; } } /* ================================================================ MOBILE HEADER RIGHT — avatar + notif bell for logged-in users ================================================================ */ .mobile-header-right { display: none; /* hidden on desktop */ } @media (max-width: 860px) { .mobile-header-right { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-shrink: 0; } .mobile-notif-btn, .mobile-avatar-btn { background: none; border: none; cursor: pointer; color: var(--text); display: flex; align-items: center; justify-content: center; padding: 6px; border-radius: 50%; position: relative; transition: background .15s; } .mobile-notif-btn:active, .mobile-avatar-btn:active { background: var(--surface2); } .mobile-notif-btn i { font-size: 1.1rem; color: var(--text2); } .mobile-notif-btn .notif-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; font-size: .6rem; } .mobile-avatar-btn .nav-avatar, .mobile-avatar-btn .nav-avatar-placeholder { width: 30px; height: 30px; border-radius: 50%; } .mobile-avatar-btn .nav-avatar-placeholder { display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; color: #fff; flex-shrink: 0; } } /* ================================================================ HOME / FEED PAGE — mobile fixes ================================================================ */ @media (max-width: 860px) { /* Section headers: wrap content so link doesn't overflow */ .section-hd { flex-wrap: wrap; gap: 8px 12px; align-items: center; } /* Trending / listener count row: allow wrap */ .section-hd > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } /* Home page container top padding (accounts for nav height) */ .container[style*="padding-top:28px"] { padding-top: 16px !important; } /* Feed card layout */ .feed-card { border-radius: 10px; overflow: hidden; } .feed-song-preview { flex-wrap: nowrap; } /* Hero sections: reduce min-height on mobile */ .hero { min-height: 200px !important; width: 100%; overflow: hidden; } .hero-content { padding: 16px !important; width: 100%; box-sizing: border-box; } /* Recently-played grid: 3 columns on tablet */ .recently-played-grid { grid-template-columns: repeat(3, 1fr) !important; } /* Section heading text wraps */ .section-title { white-space: normal; word-break: break-word; min-width: 0; flex: 1; } /* Stop any flex row from creating horizontal scroll */ .section-hd, .filter-bar { width: 100%; box-sizing: border-box; } } @media (max-width: 640px) { /* Grids on home page: 2 columns always */ .grid-3 { grid-template-columns: repeat(2, 1fr) !important; } .recently-played-grid { grid-template-columns: repeat(2, 1fr) !important; } /* Song row: hide duration on mobile */ .song-row-dur { display: none; } /* Feed song preview: hide share/add buttons on tiny screens */ .feed-song-preview .song-action-btn:last-child { display: none; } /* Hero: minimal on small phones */ .hero { min-height: 160px !important; } } /* ================================================================ ARTISTS / ALBUMS PAGE — mobile fixes ================================================================ */ @media (max-width: 860px) { /* Filter bar: horizontal scroll instead of ugly wrapping */ .filter-bar { overflow-x: auto; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; margin-bottom: 16px !important; } .filter-bar::-webkit-scrollbar { display: none; } .filter-btn { white-space: nowrap; flex-shrink: 0; } /* Artists grid: show 3 cols at tablet, 2 at phone */ .grid-5 { grid-template-columns: repeat(3, 1fr) !important; } /* Albums horizontal scroll rows */ .scroll-row { display: flex; overflow-x: auto; gap: 12px; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 8px; } .scroll-row::-webkit-scrollbar { display: none; } .scroll-row > * { flex: 0 0 160px; min-width: 0; } /* Page header row: allow wrapping on artists page */ .container > div[style*="display:flex"][style*="justify-content:space-between"] { flex-wrap: wrap; } } @media (max-width: 640px) { /* Artists: 2 columns on phones */ .grid-5 { grid-template-columns: repeat(2, 1fr) !important; } /* Album scroll cards: slightly smaller */ .scroll-row > * { flex: 0 0 140px; } } /* ================================================================ MAIN AREA: full width when sidebar is hidden on mobile ================================================================ */ @media (max-width: 860px) { /* Keep app-shell as flex but collapse properly */ .app-shell { flex-wrap: nowrap; overflow-x: hidden; width: 100%; } .main-area { flex: 1 1 auto; min-width: 0; /* critical: allows flex item to shrink below content size */ max-width: 100%; overflow-x: hidden; } .main-area .container { padding-top: 20px; box-sizing: border-box; width: 100%; } /* Ensure page-wrap never overflows */ .page-wrap { overflow-x: hidden; width: 100%; } }