/* SonoraBox 2.3 SAFE — somente alterações visuais. Nenhum JavaScript do descanso foi alterado. */ /* Desktop: Capa Única / Letras / Voltar 25px mais baixos que a posição original da base. */ @media (min-width:901px){ .stage.frame-panel>#coverModeBtn, .stage.frame-panel>#lyricsTopBtn, .stage.frame-panel>#responsiveBackBtn{top:105px!important} } /* Radiola: retirar moldura externa e título textual antigo. */ #idleCoverOverlay[data-idle-style="radiola"]::before, #idleCoverOverlay[data-idle-style="radiola"]::after{display:none!important;content:none!important} /* Fundo limpo, mantendo o mecanismo original do descanso. */ #idleCoverOverlay[data-idle-style="radiola"]{ background:radial-gradient(circle at 52% 44%,#38200f 0,#120a05 54%,#030201 100%)!important; } /* Logo no alto à esquerda. A animação existente continua sendo a da base 2.2. */ #idleCoverOverlay[data-idle-style="radiola"] #idleTravelLogo.idle-travel-logo{ left:4.5vw!important;right:auto!important;top:5vh!important; width:min(20vw,310px)!important;max-height:19vh!important; z-index:14!important;opacity:.96!important; } /* Vinil sem box/placa em volta. */ #idleCoverOverlay[data-idle-style="radiola"] .idle-turntable{ position:absolute!important;inset:8vh 25vw 12vh 22vw!important; padding:0!important;display:grid!important;place-items:center!important; background:transparent!important;border:0!important;border-radius:0!important; box-shadow:none!important;z-index:4!important; } #idleCoverOverlay[data-idle-style="radiola"] .idle-vinyl{ width:min(72vh,54vw)!important;height:min(72vh,54vw)!important; box-shadow:0 0 0 5px #080706,0 0 0 8px rgba(185,123,49,.76),0 22px 60px #000,0 0 65px rgba(218,145,54,.15)!important; } /* VUs no lado direito. Identificação visual L/R; funcionamento permanece o original da 2.2. */ #idleCoverOverlay[data-idle-style="radiola"] .idle-radiola-vus{ display:flex!important;left:auto!important;right:4.5vw!important;top:36vh!important; width:min(15vw,230px)!important;flex-direction:column!important;gap:18px!important;z-index:14!important; } #idleCoverOverlay[data-idle-style="radiola"] .idle-radiola-vu{border-color:#3a210d!important;background:linear-gradient(180deg,#f4cc75,#d88b31)!important;box-shadow:inset 0 0 25px rgba(86,35,4,.48),0 8px 25px #000,0 0 16px rgba(213,151,62,.15)!important} #idleCoverOverlay[data-idle-style="radiola"] .idle-radiola-vu:nth-child(1) span{font-size:0} #idleCoverOverlay[data-idle-style="radiola"] .idle-radiola-vu:nth-child(1) span::after{content:'L';font-size:18px} #idleCoverOverlay[data-idle-style="radiola"] .idle-radiola-vu:nth-child(2) span{font-size:0} #idleCoverOverlay[data-idle-style="radiola"] .idle-radiola-vu:nth-child(2) span::after{content:'R';font-size:18px} /* Braço com acabamento dourado/bronze, sem alterar sua lógica. */ #idleCoverOverlay[data-idle-style="radiola"] .idle-radiola-arm{ display:block!important;right:4vw!important;top:9vh!important;width:26vw!important;height:68vh!important;z-index:12!important; } #idleCoverOverlay[data-idle-style="radiola"] .idle-arm-base{ background:radial-gradient(circle,#f0c977 0 10%,#5a3517 12% 31%,#d3a24d 33% 41%,#241409 43% 58%,#a96f2e 60% 67%,#0f0905 69%)!important; box-shadow:inset 0 0 10px rgba(255,225,155,.28),0 10px 28px #000,0 0 18px rgba(214,161,74,.2)!important; } #idleCoverOverlay[data-idle-style="radiola"] .idle-arm-bar{ background:linear-gradient(90deg,#5f3514 0%,#c78d3b 24%,#f0ca76 48%,#9c6226 74%,#3b210e 100%)!important; box-shadow:inset 1px 0 rgba(255,238,190,.35),3px 5px 12px #000!important; } #idleCoverOverlay[data-idle-style="radiola"] .idle-arm-head{ background:linear-gradient(180deg,#d6a752,#754218 62%,#241308)!important; border:1px solid rgba(246,205,116,.42)!important;box-shadow:0 5px 12px #000!important; } @media(max-width:900px){ #idleCoverOverlay[data-idle-style="radiola"] #idleTravelLogo.idle-travel-logo{left:4vw!important;top:4vh!important;width:30vw!important} #idleCoverOverlay[data-idle-style="radiola"] .idle-turntable{inset:17vh 7vw 22vh 7vw!important} #idleCoverOverlay[data-idle-style="radiola"] .idle-vinyl{width:min(60vh,78vw)!important;height:min(60vh,78vw)!important} #idleCoverOverlay[data-idle-style="radiola"] .idle-radiola-vus{right:3vw!important;left:auto!important;top:auto!important;bottom:7vh!important;width:34vw!important;flex-direction:row!important;gap:8px!important} #idleCoverOverlay[data-idle-style="radiola"] .idle-radiola-arm{right:0!important;top:18vh!important;width:35vw!important;height:45vh!important} } /* v2.4 — VUs da Radiola: agulhas controladas pelos canais reais L/R. */ #idleCoverOverlay[data-idle-style="radiola"] .idle-radiola-vu i{animation:none!important;transition:transform .075s linear!important;} /* 2.5 integrada: próximas faixas, VUs rebaixados e braço seguindo progresso */ #idleCoverOverlay[data-idle-style="radiola"] .idle-upcoming{display:block;position:absolute;left:4.5vw;top:calc(5vh + min(20vw,310px)*.44 + 50px);width:min(21vw,320px);z-index:15;color:#f6d99c;font-family:Georgia,serif} .idle-upcoming{display:none} .idle-upcoming h3{font-size:clamp(13px,1.4vw,21px);margin:0 0 12px} .idle-upcoming-item{display:flex;align-items:center;gap:10px;padding:9px 6px;border-bottom:1px solid #a97a3b55;font-size:clamp(11px,1.05vw,16px)} .idle-upcoming-item>b{color:#d7a35d;min-width:14px} .idle-upcoming-item span{display:flex;flex-direction:column;min-width:0} .idle-upcoming-item strong,.idle-upcoming-item small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .idle-upcoming-item small{color:#c8ad82;margin-top:3px} .idle-upcoming-empty{font-size:13px;color:#c8ad82} #idleCoverOverlay[data-idle-style="radiola"] .idle-radiola-vus{top:43vh!important} #idleCoverOverlay[data-idle-style="radiola"] .idle-arm-bar{transform:rotate(calc(var(--arm-progress,0)* -11deg))!important;transform-origin:top center!important} #idleCoverOverlay[data-idle-style="radiola"] .idle-arm-head{transform:translateX(calc(var(--arm-progress,0)* -2vw))!important} #idleCoverOverlay[data-idle-style="radiola"] .idle-cover-caption{max-width:75vw!important;overflow:hidden;text-overflow:ellipsis} @media(max-width:900px){#idleCoverOverlay[data-idle-style="radiola"] .idle-upcoming{left:3vw;top:14vh;width:34vw}.idle-upcoming-item:nth-child(n+4){display:none}#idleCoverOverlay[data-idle-style="radiola"] .idle-radiola-vus{top:auto!important}} /* SonoraBox 2.6 — ajustes pontuais: braço articulado, VUs inferiores, grade +15px */ /* Ponta integrada à haste: ambas giram em torno do mesmo pivô. */ #idleCoverOverlay[data-idle-style="radiola"] .idle-arm-bar{ left:auto!important;right:calc(2% + 46px)!important;top:55px!important; height:43vh!important;width:18px!important; transform-origin:50% 0!important; transform:rotate(calc(18deg + var(--arm-progress,0)* 12deg))!important; transition:transform .18s linear!important; } #idleCoverOverlay[data-idle-style="radiola"] .idle-arm-head{ position:absolute!important;left:-26px!important;right:auto!important; top:auto!important;bottom:-12px!important; transform:rotate(-8deg)!important; } /* Medidores lado a lado, abaixo do espaço de deslocamento do braço. */ #idleCoverOverlay[data-idle-style="radiola"] .idle-radiola-vus{ top:auto!important;bottom:5vh!important;right:4vw!important;left:auto!important; width:min(31vw,460px)!important;flex-direction:row!important;gap:12px!important; } #idleCoverOverlay[data-idle-style="radiola"] .idle-radiola-vu{flex:1 1 0;min-width:0} /* Somente as capas no modo Grade, sem afetar Panorâmico ou outros modos. */ #libraryView.album-grid-mode #albumGrid{transform:translateY(15px)!important} @media(max-width:900px){ #idleCoverOverlay[data-idle-style="radiola"] .idle-radiola-vus{ bottom:5vh!important;right:3vw!important;width:44vw!important;gap:7px!important; } #idleCoverOverlay[data-idle-style="radiola"] .idle-arm-bar{height:36vh!important} } /* SonoraBox 2.7 — Radiola: braço único, VUs circulares, legenda e fullscreen */ #idleCoverOverlay[data-idle-style="radiola"] .idle-radiola-arm{ position:absolute!important;inset:0!important;width:100%!important;height:100%!important; transform:none!important;z-index:12!important;overflow:visible!important;pointer-events:none!important; } #idleCoverOverlay[data-idle-style="radiola"] .sb27-arm-motion{ transform-box:view-box;transform-origin:80.5% 17.5%; transform:rotate(calc(var(--arm-progress,0) * 9deg)); transition:transform .2s linear; } #idleCoverOverlay[data-idle-style="radiola"] .idle-radiola-vus{ position:absolute!important;top:auto!important;bottom:13vh!important;right:2vw!important;left:auto!important; width:min(29vw,430px)!important;display:flex!important;flex-direction:row!important;gap:12px!important; align-items:center!important;z-index:15!important; } #idleCoverOverlay[data-idle-style="radiola"] .idle-radiola-vu{ box-sizing:border-box!important;position:relative!important;flex:1 1 0!important; min-width:0!important;aspect-ratio:1!important;height:auto!important;padding:0!important; border:clamp(5px,.9vw,12px) ridge #d99b35!important;border-radius:50%!important; background:radial-gradient(circle at 45% 35%,#ffe9a0 0,#f7bf5c 65%,#c87924 100%)!important; box-shadow:inset 0 0 0 3px #a66b24,inset 0 8px 20px #85431b80,0 8px 20px #000b!important; overflow:hidden!important; } #idleCoverOverlay[data-idle-style="radiola"] .idle-radiola-vu:before{ content:'−20 −10 −5 0 +3'!important;position:absolute!important;top:26%!important; left:3%!important;right:3%!important;font:clamp(7px,.72vw,12px) Georgia,serif!important; color:#58300f!important;white-space:pre!important; } #idleCoverOverlay[data-idle-style="radiola"] .idle-radiola-vu:after{ content:'VU'!important;position:absolute;left:0;right:0;top:43%;font:bold clamp(10px,1vw,16px) Georgia,serif;color:#66350d; } #idleCoverOverlay[data-idle-style="radiola"] .idle-radiola-vu span{ position:absolute!important;top:auto!important;bottom:7%!important;left:0;right:0; font-size:0!important;z-index:3; } #idleCoverOverlay[data-idle-style="radiola"] .idle-radiola-vu span::after{font-size:clamp(11px,1vw,17px)!important} #idleCoverOverlay[data-idle-style="radiola"] .idle-radiola-vu i{ position:absolute!important;left:50%!important;bottom:11%!important; height:57%!important;width:2px!important;background:#652313!important; transform-origin:50% 100%!important;z-index:2!important; } #idleCoverOverlay[data-idle-style="radiola"] .idle-cover-caption{ box-sizing:border-box!important;position:absolute!important;left:4vw!important;right:auto!important; bottom:7vh!important;width:60vw!important;max-width:60vw!important; padding:8px 0!important;background:none!important;text-align:left!important; z-index:14!important;overflow:visible!important; } #idleCoverOverlay[data-idle-style="radiola"] .idle-cover-caption span{ display:block!important;margin:0 0 7px!important;font-size:clamp(12px,1.15vw,19px)!important; white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important; } #idleCoverOverlay[data-idle-style="radiola"] .idle-cover-caption strong{ display:block!important;font-size:clamp(15px,1.55vw,25px)!important;line-height:1.25!important; white-space:normal!important;overflow:hidden!important;display:-webkit-box!important; -webkit-box-orient:vertical!important;-webkit-line-clamp:2!important; } @media(max-width:900px){ #idleCoverOverlay[data-idle-style="radiola"] .idle-radiola-vus{right:2vw!important;bottom:15vh!important;width:38vw!important;gap:5px!important} #idleCoverOverlay[data-idle-style="radiola"] .idle-cover-caption{width:57vw!important;max-width:57vw!important;bottom:6vh!important} #idleCoverOverlay[data-idle-style="radiola"] .idle-radiola-vu:before{font-size:6px!important} } /* SonoraBox 2.8 — ajuste de composição da radiola, sem modificar a mecânica do braço. */ @media (min-width:901px){ /* Move vinil e braço juntos, preservando a posição relativa da agulha. */ #idleCoverOverlay[data-idle-style="radiola"] .idle-turntable{ translate:3vw -3vh!important; } #idleCoverOverlay[data-idle-style="radiola"] .idle-radiola-arm{ translate:3vw -3vh!important; } /* VUs mais próximos da borda inferior direita. */ #idleCoverOverlay[data-idle-style="radiola"] .idle-radiola-vus{ bottom:5vh!important; } } @media (max-width:900px){ #idleCoverOverlay[data-idle-style="radiola"] .idle-turntable{ translate:2vw -2vh!important; } #idleCoverOverlay[data-idle-style="radiola"] .idle-radiola-arm{ translate:2vw -2vh!important; } #idleCoverOverlay[data-idle-style="radiola"] .idle-radiola-vus{ bottom:5vh!important; } } /* SonoraBox 2.9: acabamento dos VUs, mantendo os elementos e a leitura L/R do áudio. */ #idleCoverOverlay[data-idle-style="radiola"] .idle-radiola-vu{ border:clamp(5px,.9vw,12px) ridge #d9a441!important; background:radial-gradient(circle at 42% 30%,#fff8d6 0%,#f5e39a 62%,#e8c96a 100%)!important; box-shadow:inset 0 0 0 3px #8a5a14,inset 0 0 15px rgba(0,0,0,.3),0 10px 25px rgba(0,0,0,.6)!important; } #idleCoverOverlay[data-idle-style="radiola"] .idle-radiola-vu:before{ color:#292117!important;top:27%!important;letter-spacing:.01em!important; } #idleCoverOverlay[data-idle-style="radiola"] .idle-radiola-vu:after{ color:#382c1b!important;top:46%!important; } /* Agulhas 25% mais curtas; o JavaScript continua definindo o ângulo real. */ #idleCoverOverlay[data-idle-style="radiola"] .idle-radiola-vu i{ height:43%!important;bottom:20%!important;width:2px!important; background:linear-gradient(to top,#444,#111)!important; border-radius:2px!important;box-shadow:0 0 2px rgba(0,0,0,.6)!important; animation:none!important;transform-origin:50% 100%!important; } /* Pivô decorativo no mesmo eixo da agulha, sem cobrir a escala. */ #idleCoverOverlay[data-idle-style="radiola"] .idle-radiola-vu i::after{ content:'';position:absolute;bottom:-5px;left:50%;transform:translateX(-50%); width:11px;height:11px;border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff,#999 60%,#444); box-shadow:0 1px 3px rgba(0,0,0,.6); } /* SonoraBox 3.0 — vinil preto natural, sem aro dourado e sem reflexos fortes. */ #idleCoverOverlay[data-idle-style="radiola"] .idle-vinyl{ background: repeating-radial-gradient(circle at 50% 50%, #090909 0px,#0e0e0e 1px,#111 2px,#080808 3px,#090909 5px,#101010 7px), radial-gradient(circle,#171717 0%,#050505 100%)!important; box-shadow:0 0 0 2px #080808,0 16px 34px rgba(0,0,0,.48)!important; } /* Remove a linha circular interna de brilho e a iluminação colorida antiga. */ #idleCoverOverlay[data-idle-style="radiola"] .idle-vinyl::before{ border-color:rgba(255,255,255,.025)!important; box-shadow:none!important; } #idleCoverOverlay[data-idle-style="radiola"] .idle-vinyl::after{ background:conic-gradient(from 22deg, transparent 0deg,rgba(255,255,255,.065) 30deg,transparent 67deg, transparent 174deg,rgba(255,255,255,.055) 206deg,transparent 245deg)!important; opacity:.42!important; } #idleCoverOverlay[data-idle-style="radiola"] .idle-vinyl-reflex{ background:radial-gradient(ellipse at 75% 23%,rgba(255,255,255,.065),transparent 25%), radial-gradient(ellipse at 25% 78%,rgba(255,255,255,.045),transparent 23%)!important; box-shadow:none!important; } #idleCoverOverlay[data-idle-style="radiola"] .idle-vinyl-reflex::before, #idleCoverOverlay[data-idle-style="radiola"] .idle-vinyl-reflex::after{ opacity:0!important;box-shadow:none!important;background:none!important; } #idleCoverOverlay[data-idle-style="radiola"] .idle-vinyl-label{ border-color:rgba(255,255,255,.035)!important; box-shadow:none!important; } /* Não exibir a posição numérica da playlist no descanso. */ #idleCoverOverlay[data-idle-style="radiola"] #idlePlaylistPosition{display:none!important} /* Escala clássica: valores à direita em vermelho. Os medidores seguem comandados pelo áudio. */ #idleCoverOverlay[data-idle-style="radiola"] .idle-radiola-vu{ border-color:#e89936!important; box-shadow:inset 0 0 0 3px #a93e02,inset 0 0 12px rgba(0,0,0,.25),0 10px 25px rgba(0,0,0,.6)!important; } #idleCoverOverlay[data-idle-style="radiola"] .idle-radiola-vu:before{ content:'−20 −10 −7 −5 −3 −2 −1 0'!important; font-size:clamp(6px,.62vw,10px)!important; left:2%!important;right:19%!important; } #idleCoverOverlay[data-idle-style="radiola"] .idle-radiola-vu .sb30-red-scale{ position:absolute!important;top:27%!important;right:3%!important;left:auto!important;bottom:auto!important; font:700 clamp(7px,.65vw,11px) Georgia,serif!important; color:#c92312!important;z-index:4!important;white-space:nowrap!important; } /* SonoraBox 3.1 — VUs 25% menores, aro bronze-dourado, agulha mais curta e elevada. Mantém a animação original por sinal L/R do JavaScript. */ #idleCoverOverlay[data-idle-style="radiola"] .idle-radiola-vus { width:min(21.75vw,322px)!important; } #idleCoverOverlay[data-idle-style="radiola"] .idle-radiola-vu { border-color:#a8742b!important; background:radial-gradient(circle at 42% 34%,#fff3cb 0%,#f2ce77 45%,#d8a34c 77%,#b97725 100%)!important; box-shadow:inset 0 0 0 2px #68400f,inset 0 0 12px rgba(48,24,4,.30), 0 9px 22px rgba(0,0,0,.58),0 0 9px rgba(215,154,60,.16)!important; } #idleCoverOverlay[data-idle-style="radiola"] .idle-radiola-vu i { height:30%!important; bottom:29%!important; transform-origin:50% 100%!important; } @media(max-width:900px) { #idleCoverOverlay[data-idle-style="radiola"] .idle-radiola-vus { width:28.5vw!important; } } /* SonoraBox 3.2: restaurar controle da agulha por JavaScript. NÃO aplicar transform !important: bloqueia o ângulo calculado pelo áudio. */ #idleCoverOverlay[data-idle-style="radiola"] .idle-radiola-vu i { height:33%!important; /* 10% maior que 3.1 (30%) */ bottom:29%!important; transform-origin:50% 100%!important; animation:none!important; transition:transform 75ms linear!important; } /* Elevar o par de VUs em 30 px, preservando suas dimensões. */ #idleCoverOverlay[data-idle-style="radiola"] .idle-radiola-vus { bottom:calc(13vh + 30px)!important; } @media(max-width:900px){ #idleCoverOverlay[data-idle-style="radiola"] .idle-radiola-vus{ bottom:calc(5vh + 30px)!important; } } /* Reduzir o contorno dourado no sulco interno, sem afetar o braço. */ #idleCoverOverlay[data-idle-style="radiola"] .idle-vinyl::before{ border-color:rgba(255,255,255,.02)!important; box-shadow:none!important; }