/* ========================================================= MUSICALWORLD — TEMA GLOBAL Arquivo: css/index/11-tema.css Responsabilidade: - Aplicar o tema claro, escuro ou sistema. - Centralizar as alterações visuais relacionadas ao tema. - Preservar a estrutura atual do MusicalWorld. - Preservar tamanhos, espaçamentos e responsividade. - Adaptar superfícies, textos, bordas e sombras. - Manter a identidade visual roxa do aplicativo. IMPORTANTE: Este arquivo NÃO altera: - estrutura dos componentes; - posicionamento; - tamanhos; - responsividade; - animações; - funcionamento do JavaScript. A preferência é definida por: html[data-theme="light"] html[data-theme="dark"] html[data-theme="system"] A preferência "system" acompanha o tema definido pelo sistema operacional. ========================================================= */ /* ========================================================= VARIÁVEIS — TEMA ESCURO ========================================================= */ html[data-theme="dark"] { --mw-cor-fundo: #0f1117; --mw-cor-superficie: #171a22; --mw-cor-superficie-2: #1d212b; --mw-cor-texto: #f3f5f8; --mw-cor-texto-secundario: #b4bcc9; --mw-cor-texto-suave: #8993a3; --mw-cor-borda: #2a303c; --mw-cor-borda-suave: #232934; --mw-cor-input: #141820; --mw-cor-hover: #202530; --mw-cor-sombra: 0 12px 35px rgba(0, 0, 0, 0.32); --mw-cor-principal: #8b6cff; --mw-cor-principal-suave: #241f3d; } /* ========================================================= TEMA ESCURO — BASE ========================================================= */ html[data-theme="dark"] body { background: var(--mw-cor-fundo); color: var(--mw-cor-texto); } /* ========================================================= TEMA ESCURO — FUNDO DO APLICATIVO ========================================================= */ html[data-theme="dark"] .app-container { background: var(--mw-cor-fundo); } /* ========================================================= TEMA ESCURO — EFEITO DE FUNDO ========================================================= */ html[data-theme="dark"] .app-container::before { background: radial-gradient( circle at 15% 10%, rgba(56, 189, 248, 0.06), transparent 35% ), radial-gradient( circle at 85% 20%, rgba(109, 74, 255, 0.10), transparent 38% ), radial-gradient( circle at 50% 90%, rgba(59, 130, 246, 0.04), transparent 40% ); } /* ========================================================= TEMA ESCURO — CABEÇALHO ========================================================= */ html[data-theme="dark"] .navbar { background: rgba(15, 17, 23, 0.92); border-color: rgba(255, 255, 255, 0.07); } html[data-theme="dark"] .cabecalho-conta-toggle, html[data-theme="dark"] .logo { color: #f3f5f8; } html[data-theme="dark"] .cabecalho-conta-toggle svg, html[data-theme="dark"] .logo svg { color: #b4bcc9; } html[data-theme="dark"] .cabecalho-conta-toggle:hover, html[data-theme="dark"] .logo:hover { color: #8b6cff; } html[data-theme="dark"] .cabecalho-conta-toggle:hover svg, html[data-theme="dark"] .logo:hover svg { color: #8b6cff; } /* ========================================================= TEMA ESCURO — AÇÕES DO CABEÇALHO ========================================================= */ html[data-theme="dark"] .navbar-action, html[data-theme="dark"] .cabecalho-acao { color: #d8dde6; } html[data-theme="dark"] .navbar-action svg, html[data-theme="dark"] .cabecalho-acao svg { color: #aeb6c4; } html[data-theme="dark"] .navbar-action:hover, html[data-theme="dark"] .cabecalho-acao:hover { color: #8b6cff; } html[data-theme="dark"] .navbar-action:hover svg, html[data-theme="dark"] .cabecalho-acao:hover svg { color: #8b6cff; } /* ========================================================= TEMA ESCURO — MENU DA CONTA ========================================================= */ html[data-theme="dark"] .menu-conta, html[data-theme="dark"] .account-menu { background: rgba(23, 26, 34, 0.98); border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 18px 42px rgba(0, 0, 0, 0.38), 0 5px 15px rgba(0, 0, 0, 0.22); } html[data-theme="dark"] .menu-conta-item, html[data-theme="dark"] .account-menu-item { color: #dce1e9; } html[data-theme="dark"] .menu-conta-item svg, html[data-theme="dark"] .account-menu-item svg { color: #9da7b6; } html[data-theme="dark"] .menu-conta-item:hover, html[data-theme="dark"] .account-menu-item:hover { background: rgba(109, 74, 255, 0.10); color: #a18aff; } html[data-theme="dark"] .menu-conta-item:hover svg, html[data-theme="dark"] .account-menu-item:hover svg { color: #a18aff; } html[data-theme="dark"] .menu-conta-divider, html[data-theme="dark"] .account-menu-divider { border-color: rgba(255, 255, 255, 0.08); } /* ========================================================= TEMA ESCURO — CONTEÚDO PRINCIPAL ========================================================= */ html[data-theme="dark"] .main-content { background: linear-gradient( 180deg, rgba(15, 17, 23, 0.76), rgba(15, 17, 23, 0.90) ); } html[data-theme="dark"] .hero-title { color: #f3f5f8; } html[data-theme="dark"] .hero-subtitle { color: #aab3c1; } /* ========================================================= TEMA ESCURO — CABEÇALHO DO FEED ========================================================= */ html[data-theme="dark"] .feed-header h2 { color: #f3f5f8; } html[data-theme="dark"] .feed-header p { color: #aab3c1; } html[data-theme="dark"] .feed-counter { color: #8993a3; } /* ========================================================= TEMA ESCURO — AVISO DO FEED ========================================================= */ html[data-theme="dark"] .feed-aviso { background: #171a22; border-color: #2a303c; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.22); } html[data-theme="dark"] .feed-aviso-icone { background: #202530; color: #aeb6c4; } html[data-theme="dark"] .feed-aviso strong { color: #e5e9ef; } html[data-theme="dark"] .feed-aviso span { color: #9da7b6; } html[data-theme="dark"] .feed-aviso-fechar { color: #8993a3; } html[data-theme="dark"] .feed-aviso-fechar:hover { background: #242a34; color: #e7ebf1; } /* ========================================================= TEMA ESCURO — BOTÃO DE FILTRO ========================================================= */ html[data-theme="dark"] .filter-trigger, html[data-theme="dark"] .btn-filtro { background: #171a22; border-color: #2a303c; color: #c5ccd7; } html[data-theme="dark"] .filter-trigger:hover, html[data-theme="dark"] .btn-filtro:hover { background: #202530; border-color: #394151; color: #f3f5f8; } /* ========================================================= TEMA ESCURO — CARDS DE ANÚNCIO ========================================================= */ html[data-theme="dark"] .ad-card-novo { background: #171a22; border-bottom-color: rgba(255, 255, 255, 0.07); } html[data-theme="dark"] .ad-card-novo:hover { background: #1a1e27; } /* ========================================================= TEMA ESCURO — MÍDIA ========================================================= */ html[data-theme="dark"] .ad-card-novo .ad-media { background: #0b0d12; } html[data-theme="dark"] .ad-card-novo .ad-media-image { background: #141820; } /* ========================================================= TEMA ESCURO — IDENTIDADE SEM MÍDIA ========================================================= */ html[data-theme="dark"] .ad-card-novo .ad-identity-sem-media { background: #171a22; } html[data-theme="dark"] .ad-card-novo .ad-identity-sem-media strong, html[data-theme="dark"] .ad-card-novo .ad-identity-sem-media .ad-nome { color: #f3f5f8; } html[data-theme="dark"] .ad-card-novo .ad-identity-sem-media span { color: #a5afbd; } html[data-theme="dark"] .ad-card-novo .ad-identity-sem-media .ad-separador { color: #6f7988; } /* ========================================================= TEMA ESCURO — AVATARES ========================================================= */ html[data-theme="dark"] .ad-card-novo .ad-avatar { border-color: rgba(23, 26, 34, 0.95); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22); } html[data-theme="dark"] .ad-interacao-avatar { border-color: #171a22; } /* ========================================================= TEMA ESCURO — MENU DO ANÚNCIO SEM MÍDIA ========================================================= */ html[data-theme="dark"] .ad-menu-sem-media { background: #202530; color: #dce1e9; } html[data-theme="dark"] .ad-menu-sem-media:hover { background: #282e39; } /* ========================================================= TEMA ESCURO — DESCRIÇÃO ========================================================= */ html[data-theme="dark"] .ad-description { color: #e5e9ef; } /* ========================================================= TEMA ESCURO — INFORMAÇÕES DO ANÚNCIO ========================================================= */ html[data-theme="dark"] .ad-styles, html[data-theme="dark"] .ad-location, html[data-theme="dark"] .ad-type, html[data-theme="dark"] .ad-meta { color: #a5afbd; } /* ========================================================= TEMA ESCURO — BOTÃO VER PERFIL ========================================================= */ html[data-theme="dark"] .ad-profile-button, html[data-theme="dark"] .ad-ver-perfil { background: #241f3d; border-color: rgba(139, 108, 255, 0.24); color: #aa96ff; } html[data-theme="dark"] .ad-profile-button:hover, html[data-theme="dark"] .ad-ver-perfil:hover { background: #2c2549; color: #b7a6ff; } /* ========================================================= TEMA ESCURO — INTERAÇÕES ========================================================= */ html[data-theme="dark"] .ad-social-button, html[data-theme="dark"] .ad-interacao-button { color: #9da7b6; } html[data-theme="dark"] .ad-social-button:hover, html[data-theme="dark"] .ad-interacao-button:hover { color: #a18aff; background: rgba(139, 108, 255, 0.10); } /* ========================================================= TEMA ESCURO — CARD DE OPORTUNIDADE ========================================================= */ html[data-theme="dark"] .feed-oportunidade-card { background: #171a22; border-color: #2a303c; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22); } html[data-theme="dark"] .feed-oportunidade-card:hover { border-color: rgba(139, 108, 255, 0.40); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.30); } /* ========================================================= TEMA ESCURO — OPORTUNIDADE / IDENTIDADE ========================================================= */ html[data-theme="dark"] .feed-oportunidade-card .publisher-name { color: #e5e9ef; } html[data-theme="dark"] .feed-oportunidade-card .publisher-location { color: #9da7b6; } /* ========================================================= TEMA ESCURO — OPORTUNIDADE / TÍTULO ========================================================= */ html[data-theme="dark"] .feed-oportunidade-card .opportunity-title { color: #f3f5f8; } html[data-theme="dark"] .feed-oportunidade-card .opportunity-establishment { color: #a5afbd; } /* ========================================================= TEMA ESCURO — OPORTUNIDADE / INFORMAÇÕES ========================================================= */ html[data-theme="dark"] .feed-oportunidade-card .opportunity-info, html[data-theme="dark"] .feed-oportunidade-card .opportunity-info span { color: #a5afbd; } html[data-theme="dark"] .feed-oportunidade-card .opportunity-value { color: #c5ccd7; } html[data-theme="dark"] .feed-oportunidade-card .opportunity-value strong { color: #f3f5f8; } /* ========================================================= TEMA ESCURO — OPORTUNIDADE / TAGS ========================================================= */ html[data-theme="dark"] .feed-oportunidade-card .tags-title { color: #a5afbd; } html[data-theme="dark"] .feed-oportunidade-card .opportunity-tag { background: #241f3d; border-color: rgba(139, 108, 255, 0.20); color: #aa96ff; } /* ========================================================= TEMA ESCURO — OPORTUNIDADE / RODAPÉ ========================================================= */ html[data-theme="dark"] .feed-oportunidade-card .opportunity-footer { border-top-color: rgba(255, 255, 255, 0.07); } html[data-theme="dark"] .feed-oportunidade-card .interested-counter { color: #e5e9ef; } html[data-theme="dark"] .feed-oportunidade-card .interested-label, html[data-theme="dark"] .feed-oportunidade-card .views { color: #8993a3; } /* ========================================================= TEMA ESCURO — OPORTUNIDADE / BOTÃO INTERESSADO ========================================================= */ html[data-theme="dark"] .feed-oportunidade-card .interest-button { background: #241f3d; border-color: rgba(139, 108, 255, 0.24); color: #aa96ff; } html[data-theme="dark"] .feed-oportunidade-card .interest-button:hover { background: #2c2549; border-color: rgba(139, 108, 255, 0.34); } html[data-theme="dark"] .feed-oportunidade-card .interest-button.active { background: #6d4aff; border-color: #6d4aff; color: #ffffff; } /* ========================================================= TEMA ESCURO — MENU INFERIOR ========================================================= */ html[data-theme="dark"] .bottom-nav { background: rgba(23, 26, 34, 0.88); border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.34); } html[data-theme="dark"] .bottom-nav-item { color: #aeb6c4; } html[data-theme="dark"] .bottom-nav-item:hover, html[data-theme="dark"] .bottom-nav-item.active { color: #f3f5f8; } html[data-theme="dark"] .nav-active-indicator { background: #252a35; border-color: rgba(255, 255, 255, 0.05); } html[data-theme="dark"] .bottom-nav .profile-image { border-color: rgba(23, 26, 34, 0.95); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28); } /* ========================================================= TEMA ESCURO — FILTROS ========================================================= */ html[data-theme="dark"] .filter-form-scroll { scrollbar-color: #3b4350 transparent; } html[data-theme="dark"] .filter-group label { color: #c5ccd7; } html[data-theme="dark"] .filter-select, html[data-theme="dark"] .filter-input { background-color: #141820; border-color: #2a303c; color: #e5e9ef; } html[data-theme="dark"] .filter-select::placeholder, html[data-theme="dark"] .filter-input::placeholder { color: #727d8d; } html[data-theme="dark"] .filter-select:focus, html[data-theme="dark"] .filter-input:focus { border-color: #8b6cff; } html[data-theme="dark"] .price-separator { color: #8993a3; } html[data-theme="dark"] .filter-btn-clear { border-color: #2a303c; color: #a5afbd; } html[data-theme="dark"] .filter-btn-clear:hover { background-color: #202530; color: #f3f5f8; } /* ========================================================= TEMA ESCURO — PESQUISA ========================================================= */ html[data-theme="dark"] .search-overlay { background: #0f1117; } html[data-theme="dark"] .search-header { background: #171a22; border-bottom-color: #2a303c; } html[data-theme="dark"] .search-input { background: #141820; border-color: #2a303c; color: #f3f5f8; } html[data-theme="dark"] .search-input::placeholder { color: #727d8d; } html[data-theme="dark"] .search-input:hover { border-color: #394151; } html[data-theme="dark"] .search-input:focus { border-color: #8b6cff; box-shadow: 0 0 0 3px rgba(139, 108, 255, 0.12); } html[data-theme="dark"] .search-results { background: #0f1117; } html[data-theme="dark"] .search-result-item { background: #171a22; border-bottom-color: #2a303c; } html[data-theme="dark"] .search-result-item:hover { background: #1d212b; } html[data-theme="dark"] .search-result-item.active { background: #202530; } html[data-theme="dark"] .search-result-name { color: #f3f5f8; } html[data-theme="dark"] .search-result-location, html[data-theme="dark"] .search-result-genre { color: #929cab; } html[data-theme="dark"] .search-result-icon, html[data-theme="dark"] .search-result-arrow { color: #8993a3; } html[data-theme="dark"] .search-empty, html[data-theme="dark"] .search-error p { color: #8993a3; } html[data-theme="dark"] .search-spinner { border-color: #2a303c; border-top-color: #8b6cff; } /* ========================================================= TEMA ESCURO — ONBOARDING ========================================================= */ html[data-theme="dark"] .musicalworld-onboarding-tooltip { background: #171a22; border-color: rgba(139, 108, 255, 0.24); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.46), 0 8px 20px rgba(0, 0, 0, 0.28); color: #f3f5f8; } html[data-theme="dark"] .musicalworld-onboarding-title { color: #f3f5f8; } html[data-theme="dark"] .musicalworld-onboarding-text { color: #a5afbd; } html[data-theme="dark"] .musicalworld-onboarding-tooltip::after { background: #171a22; border-right-color: rgba(139, 108, 255, 0.24); border-bottom-color: rgba(139, 108, 255, 0.24); } html[data-theme="dark"] .musicalworld-onboarding-tooltip.tooltip-abaixo::after { border-right-color: rgba(139, 108, 255, 0.24); border-top-color: rgba(139, 108, 255, 0.24); } html[data-theme="dark"] .musicalworld-onboarding-close { color: #8993a3; } html[data-theme="dark"] .musicalworld-onboarding-close:hover { background: #242a34; color: #f3f5f8; } /* ========================================================= TEMA SISTEMA A preferência "system" acompanha o sistema operacional. ========================================================= */ @media (prefers-color-scheme: dark) { /* ===================================================== VARIÁVEIS ===================================================== */ html[data-theme="system"] { --mw-cor-fundo: #0f1117; --mw-cor-superficie: #171a22; --mw-cor-superficie-2: #1d212b; --mw-cor-texto: #f3f5f8; --mw-cor-texto-secundario: #b4bcc9; --mw-cor-texto-suave: #8993a3; --mw-cor-borda: #2a303c; --mw-cor-borda-suave: #232934; --mw-cor-input: #141820; --mw-cor-hover: #202530; --mw-cor-sombra: 0 12px 35px rgba(0, 0, 0, 0.32); --mw-cor-principal: #8b6cff; --mw-cor-principal-suave: #241f3d; } /* ===================================================== SISTEMA — BASE ===================================================== */ html[data-theme="system"] body { background: #0f1117; color: #f3f5f8; } /* ===================================================== SISTEMA — APLICATIVO ===================================================== */ html[data-theme="system"] .app-container { background: #0f1117; } html[data-theme="system"] .app-container::before { background: radial-gradient( circle at 15% 10%, rgba(56, 189, 248, 0.06), transparent 35% ), radial-gradient( circle at 85% 20%, rgba(109, 74, 255, 0.10), transparent 38% ), radial-gradient( circle at 50% 90%, rgba(59, 130, 246, 0.04), transparent 40% ); } /* ===================================================== SISTEMA — CABEÇALHO ===================================================== */ html[data-theme="system"] .navbar { background: rgba(15, 17, 23, 0.92); border-color: rgba(255, 255, 255, 0.07); } html[data-theme="system"] .cabecalho-conta-toggle, html[data-theme="system"] .logo { color: #f3f5f8; } html[data-theme="system"] .cabecalho-conta-toggle svg, html[data-theme="system"] .logo svg { color: #b4bcc9; } html[data-theme="system"] .cabecalho-conta-toggle:hover, html[data-theme="system"] .logo:hover { color: #8b6cff; } html[data-theme="system"] .cabecalho-conta-toggle:hover svg, html[data-theme="system"] .logo:hover svg { color: #8b6cff; } html[data-theme="system"] .navbar-action, html[data-theme="system"] .cabecalho-acao { color: #d8dde6; } html[data-theme="system"] .navbar-action svg, html[data-theme="system"] .cabecalho-acao svg { color: #aeb6c4; } html[data-theme="system"] .navbar-action:hover, html[data-theme="system"] .cabecalho-acao:hover { color: #8b6cff; } html[data-theme="system"] .navbar-action:hover svg, html[data-theme="system"] .cabecalho-acao:hover svg { color: #8b6cff; } /* ===================================================== SISTEMA — MENU DA CONTA ===================================================== */ html[data-theme="system"] .menu-conta, html[data-theme="system"] .account-menu { background: rgba(23, 26, 34, 0.98); border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 18px 42px rgba(0, 0, 0, 0.38), 0 5px 15px rgba(0, 0, 0, 0.22); } html[data-theme="system"] .menu-conta-item, html[data-theme="system"] .account-menu-item { color: #dce1e9; } html[data-theme="system"] .menu-conta-item svg, html[data-theme="system"] .account-menu-item svg { color: #9da7b6; } html[data-theme="system"] .menu-conta-item:hover, html[data-theme="system"] .account-menu-item:hover { background: rgba(109, 74, 255, 0.10); color: #a18aff; } html[data-theme="system"] .menu-conta-item:hover svg, html[data-theme="system"] .account-menu-item:hover svg { color: #a18aff; } html[data-theme="system"] .menu-conta-divider, html[data-theme="system"] .account-menu-divider { border-color: rgba(255, 255, 255, 0.08); } /* ===================================================== SISTEMA — CONTEÚDO ===================================================== */ html[data-theme="system"] .main-content { background: linear-gradient( 180deg, rgba(15, 17, 23, 0.76), rgba(15, 17, 23, 0.90) ); } html[data-theme="system"] .hero-title, html[data-theme="system"] .feed-header h2 { color: #f3f5f8; } html[data-theme="system"] .hero-subtitle, html[data-theme="system"] .feed-header p { color: #aab3c1; } html[data-theme="system"] .feed-counter { color: #8993a3; } /* ===================================================== SISTEMA — AVISO ===================================================== */ html[data-theme="system"] .feed-aviso { background: #171a22; border-color: #2a303c; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.22); } html[data-theme="system"] .feed-aviso-icone { background: #202530; color: #aeb6c4; } html[data-theme="system"] .feed-aviso strong { color: #e5e9ef; } html[data-theme="system"] .feed-aviso span { color: #9da7b6; } html[data-theme="system"] .feed-aviso-fechar { color: #8993a3; } html[data-theme="system"] .feed-aviso-fechar:hover { background: #242a34; color: #e7ebf1; } /* ===================================================== SISTEMA — FILTRO ===================================================== */ html[data-theme="system"] .filter-trigger, html[data-theme="system"] .btn-filtro { background: #171a22; border-color: #2a303c; color: #c5ccd7; } html[data-theme="system"] .filter-trigger:hover, html[data-theme="system"] .btn-filtro:hover { background: #202530; border-color: #394151; color: #f3f5f8; } html[data-theme="system"] .filter-form-scroll { scrollbar-color: #3b4350 transparent; } html[data-theme="system"] .filter-group label { color: #c5ccd7; } html[data-theme="system"] .filter-select, html[data-theme="system"] .filter-input { background-color: #141820; border-color: #2a303c; color: #e5e9ef; } html[data-theme="system"] .filter-select::placeholder, html[data-theme="system"] .filter-input::placeholder { color: #727d8d; } html[data-theme="system"] .filter-select:focus, html[data-theme="system"] .filter-input:focus { border-color: #8b6cff; } html[data-theme="system"] .price-separator { color: #8993a3; } html[data-theme="system"] .filter-btn-clear { border-color: #2a303c; color: #a5afbd; } html[data-theme="system"] .filter-btn-clear:hover { background-color: #202530; color: #f3f5f8; } /* ===================================================== SISTEMA — FEED ===================================================== */ html[data-theme="system"] .ad-card-novo { background: #171a22; border-bottom-color: rgba(255, 255, 255, 0.07); } html[data-theme="system"] .ad-card-novo:hover { background: #1a1e27; } html[data-theme="system"] .ad-card-novo .ad-media { background: #0b0d12; } html[data-theme="system"] .ad-card-novo .ad-media-image { background: #141820; } html[data-theme="system"] .ad-card-novo .ad-identity-sem-media { background: #171a22; } html[data-theme="system"] .ad-card-novo .ad-identity-sem-media strong, html[data-theme="system"] .ad-card-novo .ad-identity-sem-media .ad-nome { color: #f3f5f8; } html[data-theme="system"] .ad-card-novo .ad-identity-sem-media span { color: #a5afbd; } html[data-theme="system"] .ad-card-novo .ad-identity-sem-media .ad-separador { color: #6f7988; } html[data-theme="system"] .ad-card-novo .ad-avatar { border-color: rgba(23, 26, 34, 0.95); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22); } html[data-theme="system"] .ad-menu-sem-media { background: #202530; color: #dce1e9; } html[data-theme="system"] .ad-menu-sem-media:hover { background: #282e39; } html[data-theme="system"] .ad-description { color: #e5e9ef; } html[data-theme="system"] .ad-styles, html[data-theme="system"] .ad-location, html[data-theme="system"] .ad-type, html[data-theme="system"] .ad-meta { color: #a5afbd; } html[data-theme="system"] .ad-profile-button, html[data-theme="system"] .ad-ver-perfil { background: #241f3d; border-color: rgba(139, 108, 255, 0.24); color: #aa96ff; } html[data-theme="system"] .ad-profile-button:hover, html[data-theme="system"] .ad-ver-perfil:hover { background: #2c2549; color: #b7a6ff; } html[data-theme="system"] .ad-social-button, html[data-theme="system"] .ad-interacao-button { color: #9da7b6; } html[data-theme="system"] .ad-social-button:hover, html[data-theme="system"] .ad-interacao-button:hover { color: #a18aff; background: rgba(139, 108, 255, 0.10); } html[data-theme="system"] .ad-interacao-avatar { border-color: #171a22; } /* ===================================================== SISTEMA — OPORTUNIDADES ===================================================== */ html[data-theme="system"] .feed-oportunidade-card { background: #171a22; border-color: #2a303c; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22); } html[data-theme="system"] .feed-oportunidade-card:hover { border-color: rgba(139, 108, 255, 0.40); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.30); } html[data-theme="system"] .feed-oportunidade-card .publisher-name { color: #e5e9ef; } html[data-theme="system"] .feed-oportunidade-card .publisher-location { color: #9da7b6; } html[data-theme="system"] .feed-oportunidade-card .opportunity-title { color: #f3f5f8; } html[data-theme="system"] .feed-oportunidade-card .opportunity-establishment { color: #a5afbd; } html[data-theme="system"] .feed-oportunidade-card .opportunity-info, html[data-theme="system"] .feed-oportunidade-card .opportunity-info span { color: #a5afbd; } html[data-theme="system"] .feed-oportunidade-card .opportunity-value { color: #c5ccd7; } html[data-theme="system"] .feed-oportunidade-card .opportunity-value strong { color: #f3f5f8; } html[data-theme="system"] .feed-oportunidade-card .tags-title { color: #a5afbd; } html[data-theme="system"] .feed-oportunidade-card .opportunity-tag { background: #241f3d; border-color: rgba(139, 108, 255, 0.20); color: #aa96ff; } html[data-theme="system"] .feed-oportunidade-card .opportunity-footer { border-top-color: rgba(255, 255, 255, 0.07); } html[data-theme="system"] .feed-oportunidade-card .interested-counter { color: #e5e9ef; } html[data-theme="system"] .feed-oportunidade-card .interested-label, html[data-theme="system"] .feed-oportunidade-card .views { color: #8993a3; } html[data-theme="system"] .feed-oportunidade-card .interest-button { background: #241f3d; border-color: rgba(139, 108, 255, 0.24); color: #aa96ff; } html[data-theme="system"] .feed-oportunidade-card .interest-button:hover { background: #2c2549; border-color: rgba(139, 108, 255, 0.34); } html[data-theme="system"] .feed-oportunidade-card .interest-button.active { background: #6d4aff; border-color: #6d4aff; color: #ffffff; } /* ===================================================== SISTEMA — MENU INFERIOR ===================================================== */ html[data-theme="system"] .bottom-nav { background: rgba(23, 26, 34, 0.88); border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.34); } html[data-theme="system"] .bottom-nav-item { color: #aeb6c4; } html[data-theme="system"] .bottom-nav-item:hover, html[data-theme="system"] .bottom-nav-item.active { color: #f3f5f8; } html[data-theme="system"] .nav-active-indicator { background: #252a35; border-color: rgba(255, 255, 255, 0.05); } html[data-theme="system"] .bottom-nav .profile-image { border-color: rgba(23, 26, 34, 0.95); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28); } /* ===================================================== SISTEMA — PESQUISA ===================================================== */ html[data-theme="system"] .search-overlay, html[data-theme="system"] .search-results { background: #0f1117; } html[data-theme="system"] .search-header { background: #171a22; border-bottom-color: #2a303c; } html[data-theme="system"] .search-input { background: #141820; border-color: #2a303c; color: #f3f5f8; } html[data-theme="system"] .search-input::placeholder { color: #727d8d; } html[data-theme="system"] .search-input:hover { border-color: #394151; } html[data-theme="system"] .search-input:focus { border-color: #8b6cff; box-shadow: 0 0 0 3px rgba(139, 108, 255, 0.12); } html[data-theme="system"] .search-result-item { background: #171a22; border-bottom-color: #2a303c; } html[data-theme="system"] .search-result-item:hover { background: #1d212b; } html[data-theme="system"] .search-result-item.active { background: #202530; } html[data-theme="system"] .search-result-name { color: #f3f5f8; } html[data-theme="system"] .search-result-location, html[data-theme="system"] .search-result-genre { color: #929cab; } html[data-theme="system"] .search-result-icon, html[data-theme="system"] .search-result-arrow { color: #8993a3; } html[data-theme="system"] .search-empty, html[data-theme="system"] .search-error p { color: #8993a3; } html[data-theme="system"] .search-spinner { border-color: #2a303c; border-top-color: #8b6cff; } /* ===================================================== SISTEMA — ONBOARDING ===================================================== */ html[data-theme="system"] .musicalworld-onboarding-tooltip { background: #171a22; border-color: rgba(139, 108, 255, 0.24); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.46), 0 8px 20px rgba(0, 0, 0, 0.28); color: #f3f5f8; } html[data-theme="system"] .musicalworld-onboarding-title { color: #f3f5f8; } html[data-theme="system"] .musicalworld-onboarding-text { color: #a5afbd; } html[data-theme="system"] .musicalworld-onboarding-tooltip::after { background: #171a22; border-right-color: rgba(139, 108, 255, 0.24); border-bottom-color: rgba(139, 108, 255, 0.24); } html[data-theme="system"] .musicalworld-onboarding-tooltip.tooltip-abaixo::after { border-right-color: rgba(139, 108, 255, 0.24); border-top-color: rgba(139, 108, 255, 0.24); } html[data-theme="system"] .musicalworld-onboarding-close { color: #8993a3; } html[data-theme="system"] .musicalworld-onboarding-close:hover { background: #242a34; color: #f3f5f8; } } /* ========================================================= TEMA ESCURO — DESCRIÇÃO REAL DO ANÚNCIO ========================================================= */ html[data-theme="dark"] .ad-card-descricao { color: #edf1f7; } @media (prefers-color-scheme: dark) { html[data-theme="system"] .ad-card-descricao { color: #edf1f7; } } /* ========================================================= TEMA ESCURO — TAG DO TIPO DA PUBLICAÇÃO ========================================================= */ html[data-theme="dark"] .ad-card-novo .ad-card-tipo-publicacao { background: #2b2418 !important; color: #f0b35a !important; } @media (prefers-color-scheme: dark) { html[data-theme="system"] .ad-card-novo .ad-card-tipo-publicacao { background: #2b2418 !important; color: #f0b35a !important; } } /* ========================================================= TEMA ESCURO — CARDS DE OPORTUNIDADE ========================================================= */ /* ========================================================= CARD PRINCIPAL ========================================================= */ html[data-theme="dark"] .feed-oportunidade-card { background: #171a22 !important; border-color: #2a303c !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.24) !important; } html[data-theme="dark"] .feed-oportunidade-card:hover { border-color: #4a3f78 !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.30) !important; } /* ========================================================= AVATAR DO PUBLICADOR ========================================================= */ html[data-theme="dark"] .feed-oportunidade-publicador-avatar { background: #241f3d !important; border-color: #3a315b !important; } html[data-theme="dark"] .feed-oportunidade-publicador-avatar-inicial { color: #b7a8ff !important; background: #241f3d !important; border-color: #3a315b !important; } /* ========================================================= NOME DO PUBLICADOR ========================================================= */ html[data-theme="dark"] .feed-oportunidade-publicador-nome { color: #edf1f7 !important; } /* ========================================================= ÍCONE DA OPORTUNIDADE ========================================================= */ html[data-theme="dark"] .feed-oportunidade-icon { background: #241f3d !important; color: #a994ff !important; } /* ========================================================= LABEL "OPORTUNIDADE" ========================================================= */ html[data-theme="dark"] .feed-oportunidade-label { color: #a994ff !important; } /* ========================================================= BLOCO "PROCURANDO" ========================================================= */ html[data-theme="dark"] .feed-oportunidade-tipo { color: #b4bcc9 !important; } html[data-theme="dark"] .feed-oportunidade-tipo-label { color: #b4bcc9 !important; } html[data-theme="dark"] .feed-oportunidade-tipo-artista { color: #edf1f7 !important; } /* ========================================================= TÍTULO ========================================================= */ html[data-theme="dark"] .feed-oportunidade-titulo { color: #f3f5f8 !important; } html[data-theme="dark"] .feed-oportunidade-estabelecimento { color: #b4bcc9 !important; } /* ========================================================= INFORMAÇÕES DO EVENTO ========================================================= */ html[data-theme="dark"] .feed-oportunidade-informacao { color: #b4bcc9 !important; } html[data-theme="dark"] .feed-oportunidade-informacao-icon { color: #8993a3 !important; } /* ========================================================= CACHÊ ========================================================= */ html[data-theme="dark"] .feed-oportunidade-valor { color: #b4bcc9 !important; } html[data-theme="dark"] .feed-oportunidade-valor .feed-oportunidade-informacao-icon { color: #a994ff !important; } html[data-theme="dark"] .feed-oportunidade-valor strong { color: #f3f5f8 !important; } /* ========================================================= TÍTULOS DE ESTILOS / INSTRUMENTOS ========================================================= */ html[data-theme="dark"] .feed-oportunidade-tags-titulo { color: #b4bcc9 !important; } /* ========================================================= TAGS DE ESTILOS / INSTRUMENTOS ========================================================= */ html[data-theme="dark"] .feed-oportunidade-tag { color: #b9adff !important; background: #241f3d !important; border-color: #3a315b !important; } /* ========================================================= RODAPÉ ========================================================= */ html[data-theme="dark"] .feed-oportunidade-footer { border-top-color: #2a303c !important; } /* ========================================================= BOTÃO "TENHO INTERESSE" ========================================================= */ html[data-theme="dark"] .feed-oportunidade-interesse { color: #b9adff !important; background: #241f3d !important; border-color: #3a315b !important; } html[data-theme="dark"] .feed-oportunidade-interesse:hover { background: #302852 !important; border-color: #4a3f78 !important; } /* ========================================================= AVATARES DOS INTERESSADOS ========================================================= */ html[data-theme="dark"] .feed-oportunidade-avatar { background: #171a22 !important; border-color: #171a22 !important; } html[data-theme="dark"] .feed-oportunidade-avatar-inicial { color: #b9adff !important; background: #241f3d !important; } /* ========================================================= CONTADOR DE INTERESSADOS ========================================================= */ html[data-theme="dark"] .feed-oportunidade-contador { color: #f3f5f8 !important; } html[data-theme="dark"] .feed-oportunidade-contador-label { color: #8993a3 !important; } /* ========================================================= CONTADOR DE VISUALIZAÇÕES ========================================================= */ html[data-theme="dark"] .feed-oportunidade-visualizacoes { color: #8993a3 !important; } html[data-theme="dark"] .feed-oportunidade-visualizacoes-icon { color: #8993a3 !important; } html[data-theme="dark"] .feed-oportunidade-visualizacoes-contador { color: #b4bcc9 !important; } /* ========================================================= ESTADO — INTERESSE ATIVO Mantém o botão roxo principal. ========================================================= */ html[data-theme="dark"] .feed-oportunidade-card.interesse-ativo .feed-oportunidade-interesse { color: #ffffff !important; background: #6d4aff !important; border-color: #6d4aff !important; } html[data-theme="dark"] .feed-oportunidade-card.interesse-ativo .feed-oportunidade-interesse:hover { background: #5f3ff0 !important; border-color: #5f3ff0 !important; } /* ========================================================= FOCO ========================================================= */ html[data-theme="dark"] .feed-oportunidade-card:focus-within { border-color: #4a3f78 !important; } /* ========================================================= SYSTEM — MODO ESCURO ========================================================= */ @media (prefers-color-scheme: dark) { html[data-theme="system"] .feed-oportunidade-card { background: #171a22 !important; border-color: #2a303c !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.24) !important; } html[data-theme="system"] .feed-oportunidade-card:hover { border-color: #4a3f78 !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.30) !important; } html[data-theme="system"] .feed-oportunidade-publicador-avatar { background: #241f3d !important; border-color: #3a315b !important; } html[data-theme="system"] .feed-oportunidade-publicador-avatar-inicial { color: #b7a8ff !important; background: #241f3d !important; border-color: #3a315b !important; } html[data-theme="system"] .feed-oportunidade-publicador-nome { color: #edf1f7 !important; } html[data-theme="system"] .feed-oportunidade-icon { background: #241f3d !important; color: #a994ff !important; } html[data-theme="system"] .feed-oportunidade-label { color: #a994ff !important; } html[data-theme="system"] .feed-oportunidade-tipo { color: #b4bcc9 !important; } html[data-theme="system"] .feed-oportunidade-tipo-label { color: #b4bcc9 !important; } html[data-theme="system"] .feed-oportunidade-tipo-artista { color: #edf1f7 !important; } html[data-theme="system"] .feed-oportunidade-titulo { color: #f3f5f8 !important; } html[data-theme="system"] .feed-oportunidade-estabelecimento { color: #b4bcc9 !important; } html[data-theme="system"] .feed-oportunidade-informacao { color: #b4bcc9 !important; } html[data-theme="system"] .feed-oportunidade-informacao-icon { color: #8993a3 !important; } html[data-theme="system"] .feed-oportunidade-valor { color: #b4bcc9 !important; } html[data-theme="system"] .feed-oportunidade-valor .feed-oportunidade-informacao-icon { color: #a994ff !important; } html[data-theme="system"] .feed-oportunidade-valor strong { color: #f3f5f8 !important; } html[data-theme="system"] .feed-oportunidade-tags-titulo { color: #b4bcc9 !important; } html[data-theme="system"] .feed-oportunidade-tag { color: #b9adff !important; background: #241f3d !important; border-color: #3a315b !important; } html[data-theme="system"] .feed-oportunidade-footer { border-top-color: #2a303c !important; } html[data-theme="system"] .feed-oportunidade-interesse { color: #b9adff !important; background: #241f3d !important; border-color: #3a315b !important; } html[data-theme="system"] .feed-oportunidade-interesse:hover { background: #302852 !important; border-color: #4a3f78 !important; } html[data-theme="system"] .feed-oportunidade-avatar { background: #171a22 !important; border-color: #171a22 !important; } html[data-theme="system"] .feed-oportunidade-avatar-inicial { color: #b9adff !important; background: #241f3d !important; } html[data-theme="system"] .feed-oportunidade-contador { color: #f3f5f8 !important; } html[data-theme="system"] .feed-oportunidade-contador-label { color: #8993a3 !important; } html[data-theme="system"] .feed-oportunidade-visualizacoes { color: #8993a3 !important; } html[data-theme="system"] .feed-oportunidade-visualizacoes-icon { color: #8993a3 !important; } html[data-theme="system"] .feed-oportunidade-visualizacoes-contador { color: #b4bcc9 !important; } html[data-theme="system"] .feed-oportunidade-card.interesse-ativo .feed-oportunidade-interesse { color: #ffffff !important; background: #6d4aff !important; border-color: #6d4aff !important; } html[data-theme="system"] .feed-oportunidade-card.interesse-ativo .feed-oportunidade-interesse:hover { background: #5f3ff0 !important; border-color: #5f3ff0 !important; } html[data-theme="system"] .feed-oportunidade-card:focus-within { border-color: #4a3f78 !important; } } /* ========================================================= TEMA ESCURO — BOTÕES E ÍCONES DO CABEÇALHO ========================================================= */ /* --------------------------------------------------------- BOTÕES DOS ÍCONES --------------------------------------------------------- */ html[data-theme="dark"] .navbar-actions .nav-icon-btn, html[data-theme="dark"] .navbar-actions .cabecalho-btn-anunciar { background: #171a22 !important; border-color: #2a303c !important; color: #b8c0ce !important; } /* --------------------------------------------------------- ÍCONES SVG Os SVGs utilizam stroke="currentColor". --------------------------------------------------------- */ html[data-theme="dark"] .navbar-actions .nav-icon-btn .top-icon-svg, html[data-theme="dark"] .navbar-actions .cabecalho-btn-anunciar .cabecalho-anunciar-icon { color: #b8c0ce !important; stroke: currentColor !important; } /* --------------------------------------------------------- TEXTOS DOS BOTÕES --------------------------------------------------------- */ html[data-theme="dark"] .navbar-actions .cabecalho-action-label { color: #b8c0ce !important; } /* --------------------------------------------------------- HOVER DOS BOTÕES --------------------------------------------------------- */ html[data-theme="dark"] .navbar-actions .nav-icon-btn:hover, html[data-theme="dark"] .navbar-actions .cabecalho-btn-anunciar:hover { background: #202530 !important; border-color: #3a4150 !important; color: #a994ff !important; } /* --------------------------------------------------------- HOVER DOS ÍCONES --------------------------------------------------------- */ html[data-theme="dark"] .navbar-actions .nav-icon-btn:hover .top-icon-svg, html[data-theme="dark"] .navbar-actions .cabecalho-btn-anunciar:hover .cabecalho-anunciar-icon { color: #a994ff !important; stroke: currentColor !important; } /* --------------------------------------------------------- SETA DA CONTA --------------------------------------------------------- */ html[data-theme="dark"] .cabecalho-conta-seta { color: #aeb7c6 !important; } /* --------------------------------------------------------- HOVER / MENU ABERTO DA CONTA --------------------------------------------------------- */ html[data-theme="dark"] .cabecalho-conta-toggle:hover .cabecalho-conta-seta, html[data-theme="dark"] .cabecalho-conta-toggle.aberto .cabecalho-conta-seta { color: #a994ff !important; } /* ========================================================= TEMA SISTEMA — MODO ESCURO ========================================================= */ @media (prefers-color-scheme: dark) { /* ----------------------------------------------------- BOTÕES DOS ÍCONES ----------------------------------------------------- */ html[data-theme="system"] .navbar-actions .nav-icon-btn, html[data-theme="system"] .navbar-actions .cabecalho-btn-anunciar { background: #171a22 !important; border-color: #2a303c !important; color: #b8c0ce !important; } /* ----------------------------------------------------- ÍCONES SVG ----------------------------------------------------- */ html[data-theme="system"] .navbar-actions .nav-icon-btn .top-icon-svg, html[data-theme="system"] .navbar-actions .cabecalho-btn-anunciar .cabecalho-anunciar-icon { color: #b8c0ce !important; stroke: currentColor !important; } /* ----------------------------------------------------- TEXTOS DOS BOTÕES ----------------------------------------------------- */ html[data-theme="system"] .navbar-actions .cabecalho-action-label { color: #b8c0ce !important; } /* ----------------------------------------------------- HOVER DOS BOTÕES ----------------------------------------------------- */ html[data-theme="system"] .navbar-actions .nav-icon-btn:hover, html[data-theme="system"] .navbar-actions .cabecalho-btn-anunciar:hover { background: #202530 !important; border-color: #3a4150 !important; color: #a994ff !important; } /* ----------------------------------------------------- HOVER DOS ÍCONES ----------------------------------------------------- */ html[data-theme="system"] .navbar-actions .nav-icon-btn:hover .top-icon-svg, html[data-theme="system"] .navbar-actions .cabecalho-btn-anunciar:hover .cabecalho-anunciar-icon { color: #a994ff !important; stroke: currentColor !important; } /* ----------------------------------------------------- SETA DA CONTA ----------------------------------------------------- */ html[data-theme="system"] .cabecalho-conta-seta { color: #aeb7c6 !important; } /* ----------------------------------------------------- HOVER / MENU ABERTO DA CONTA ----------------------------------------------------- */ html[data-theme="system"] .cabecalho-conta-toggle:hover .cabecalho-conta-seta, html[data-theme="system"] .cabecalho-conta-toggle.aberto .cabecalho-conta-seta { color: #a994ff !important; } } /* ========================================================= TEMA ESCURO — MODAL ANUNCIAR ========================================================= */ /* ========================================================= OVERLAY ========================================================= */ html[data-theme="dark"] .modal-anunciar-overlay { background: rgba(0, 0, 0, 0.62); } /* ========================================================= PAINEL / SHEET ========================================================= */ html[data-theme="dark"] .modal-anunciar-sheet { background: #171a22; } /* ========================================================= HANDLE ========================================================= */ html[data-theme="dark"] .modal-anunciar-sheet .modal-handle { background: #4b5563; } /* ========================================================= CABEÇALHO ========================================================= */ html[data-theme="dark"] .modal-anunciar-sheet .modal-header h3 { color: #f3f5f8; } html[data-theme="dark"] .modal-anunciar-sheet .modal-header p { color: #a5afbd; } /* ========================================================= ITENS DE OPÇÃO ========================================================= */ html[data-theme="dark"] .modal-anunciar-sheet .modal-option-item { background: #1d212b; border-color: #2a303c; color: #f3f5f8; } html[data-theme="dark"] .modal-anunciar-sheet .modal-option-item:hover { background: #202530; border-color: #394151; } /* ========================================================= ÍCONES DAS OPÇÕES ========================================================= */ html[data-theme="dark"] .singer-icon { background: #1d2940; color: #7da8ff; } html[data-theme="dark"] .musician-icon { background: #173329; color: #5fd3a0; } html[data-theme="dark"] .event-icon { background: #39291c; color: #f0a35b; } html[data-theme="dark"] .opportunity-icon { background: #241f3d; color: #a994ff; } html[data-theme="dark"] .song-icon { background: #2b2040; color: #c18aff; } /* ========================================================= TEXTOS DAS OPÇÕES ========================================================= */ html[data-theme="dark"] .modal-anunciar-sheet .modal-option-text h4 { color: #f3f5f8; } html[data-theme="dark"] .modal-anunciar-sheet .modal-option-text p { color: #a5afbd; } /* ========================================================= SETA ========================================================= */ html[data-theme="dark"] .modal-anunciar-sheet .modal-arrow { color: #8993a3; } /* ========================================================= BOTÃO CANCELAR ========================================================= */ html[data-theme="dark"] .modal-anunciar-sheet .modal-close-btn { background: #202530; color: #c5ccd7; } html[data-theme="dark"] .modal-anunciar-sheet .modal-close-btn:active { background: #2a303c; } /* ========================================================= TEMA SISTEMA — MODAL ANUNCIAR ========================================================= */ @media (prefers-color-scheme: dark) { /* ===================================================== OVERLAY ===================================================== */ html[data-theme="system"] .modal-anunciar-overlay { background: rgba(0, 0, 0, 0.62); } /* ===================================================== PAINEL / SHEET ===================================================== */ html[data-theme="system"] .modal-anunciar-sheet { background: #171a22; } /* ===================================================== HANDLE ===================================================== */ html[data-theme="system"] .modal-anunciar-sheet .modal-handle { background: #4b5563; } /* ===================================================== CABEÇALHO ===================================================== */ html[data-theme="system"] .modal-anunciar-sheet .modal-header h3 { color: #f3f5f8; } html[data-theme="system"] .modal-anunciar-sheet .modal-header p { color: #a5afbd; } /* ===================================================== ITENS DE OPÇÃO ===================================================== */ html[data-theme="system"] .modal-anunciar-sheet .modal-option-item { background: #1d212b; border-color: #2a303c; color: #f3f5f8; } html[data-theme="system"] .modal-anunciar-sheet .modal-option-item:hover { background: #202530; border-color: #394151; } /* ===================================================== ÍCONES DAS OPÇÕES ===================================================== */ html[data-theme="system"] .singer-icon { background: #1d2940; color: #7da8ff; } html[data-theme="system"] .musician-icon { background: #173329; color: #5fd3a0; } html[data-theme="system"] .event-icon { background: #39291c; color: #f0a35b; } html[data-theme="system"] .opportunity-icon { background: #241f3d; color: #a994ff; } html[data-theme="system"] .song-icon { background: #2b2040; color: #c18aff; } /* ===================================================== TEXTOS DAS OPÇÕES ===================================================== */ html[data-theme="system"] .modal-anunciar-sheet .modal-option-text h4 { color: #f3f5f8; } html[data-theme="system"] .modal-anunciar-sheet .modal-option-text p { color: #a5afbd; } /* ===================================================== SETA ===================================================== */ html[data-theme="system"] .modal-anunciar-sheet .modal-arrow { color: #8993a3; } /* ===================================================== BOTÃO CANCELAR ===================================================== */ html[data-theme="system"] .modal-anunciar-sheet .modal-close-btn { background: #202530; color: #c5ccd7; } html[data-theme="system"] .modal-anunciar-sheet .modal-close-btn:active { background: #2a303c; } } /* ========================================================= MUSICALWORLD — DARK MODE MODAL DE FILTRO Responsabilidade: - Adaptar o modal de filtro para o tema escuro. - Preservar integralmente o layout e comportamento definidos em css/modal-filtro.css. - Aplicar o mesmo comportamento para o tema "system". ========================================================= */ /* ========================================================= TEMA DARK — MODAL FILTRO ========================================================= */ html[data-theme="dark"] .modal-filtro-overlay { background: rgba(0, 0, 0, 0.62); } html[data-theme="dark"] .modal-filtro-sheet { background: #171a22; box-shadow: 0 -8px 35px rgba(0, 0, 0, 0.45); } /* ========================================================= ALÇA ========================================================= */ html[data-theme="dark"] .modal-filtro-sheet .modal-handle { background: #4b5563; } /* ========================================================= CABEÇALHO ========================================================= */ html[data-theme="dark"] .modal-filtro-sheet .modal-header h2 { color: #f3f5f8; } html[data-theme="dark"] .modal-filtro-sheet .modal-header p { color: #a5afbd; } /* ========================================================= BOTÃO FECHAR ========================================================= */ html[data-theme="dark"] .modal-filtro-sheet .modal-close-btn { background: #202530; color: #c5ccd7; } html[data-theme="dark"] .modal-filtro-sheet .modal-close-btn:hover { background: #2a303c; } /* ========================================================= GRUPOS / LABELS ========================================================= */ html[data-theme="dark"] .filter-group label { color: #cbd2dc; } /* ========================================================= SELECTS E INPUTS ========================================================= */ html[data-theme="dark"] .filter-group select, html[data-theme="dark"] .filter-group input { background: #1d212b; border-color: #2f3643; color: #f3f5f8; } html[data-theme="dark"] .filter-group select:focus, html[data-theme="dark"] .filter-group input:focus { border-color: #2878f0; box-shadow: 0 0 0 3px rgba(40, 120, 240, 0.16); } /* ========================================================= PLACEHOLDER ========================================================= */ html[data-theme="dark"] .filter-group input::placeholder { color: #7f8998; } /* ========================================================= FAIXA DE VALOR ========================================================= */ html[data-theme="dark"] .filter-price-row span { color: #a5afbd; } /* ========================================================= ÁREA DOS BOTÕES ========================================================= */ html[data-theme="dark"] .modal-filter-actions { border-top-color: #2a303c; background: #171a22; } /* ========================================================= BOTÃO LIMPAR ========================================================= */ html[data-theme="dark"] .btn-filter-clear { border-color: #343b48; background: #1d212b; color: #cbd2dc; } html[data-theme="dark"] .btn-filter-clear:hover { background: #252a35; } /* ========================================================= BOTÃO APLICAR ========================================================= */ html[data-theme="dark"] .btn-filter-apply { background: #2878f0; color: #ffffff; } html[data-theme="dark"] .btn-filter-apply:hover { background: #1769df; } /* ========================================================= BARRA DE ROLAGEM ========================================================= */ html[data-theme="dark"] .modal-filter-content::-webkit-scrollbar-track { background: transparent; } html[data-theme="dark"] .modal-filter-content::-webkit-scrollbar-thumb { background: #3b4350; } /* ========================================================= TEMA SYSTEM — MODAL FILTRO ========================================================= */ @media (prefers-color-scheme: dark) { html[data-theme="system"] .modal-filtro-overlay { background: rgba(0, 0, 0, 0.62); } html[data-theme="system"] .modal-filtro-sheet { background: #171a22; box-shadow: 0 -8px 35px rgba(0, 0, 0, 0.45); } /* ----------------------------------------------------- ALÇA ----------------------------------------------------- */ html[data-theme="system"] .modal-filtro-sheet .modal-handle { background: #4b5563; } /* ----------------------------------------------------- CABEÇALHO ----------------------------------------------------- */ html[data-theme="system"] .modal-filtro-sheet .modal-header h2 { color: #f3f5f8; } html[data-theme="system"] .modal-filtro-sheet .modal-header p { color: #a5afbd; } /* ----------------------------------------------------- BOTÃO FECHAR ----------------------------------------------------- */ html[data-theme="system"] .modal-filtro-sheet .modal-close-btn { background: #202530; color: #c5ccd7; } html[data-theme="system"] .modal-filtro-sheet .modal-close-btn:hover { background: #2a303c; } /* ----------------------------------------------------- GRUPOS / LABELS ----------------------------------------------------- */ html[data-theme="system"] .filter-group label { color: #cbd2dc; } /* ----------------------------------------------------- SELECTS E INPUTS ----------------------------------------------------- */ html[data-theme="system"] .filter-group select, html[data-theme="system"] .filter-group input { background: #1d212b; border-color: #2f3643; color: #f3f5f8; } html[data-theme="system"] .filter-group select:focus, html[data-theme="system"] .filter-group input:focus { border-color: #2878f0; box-shadow: 0 0 0 3px rgba(40, 120, 240, 0.16); } /* ----------------------------------------------------- PLACEHOLDER ----------------------------------------------------- */ html[data-theme="system"] .filter-group input::placeholder { color: #7f8998; } /* ----------------------------------------------------- FAIXA DE VALOR ----------------------------------------------------- */ html[data-theme="system"] .filter-price-row span { color: #a5afbd; } /* ----------------------------------------------------- ÁREA DOS BOTÕES ----------------------------------------------------- */ html[data-theme="system"] .modal-filter-actions { border-top-color: #2a303c; background: #171a22; } /* ----------------------------------------------------- BOTÃO LIMPAR ----------------------------------------------------- */ html[data-theme="system"] .btn-filter-clear { border-color: #343b48; background: #1d212b; color: #cbd2dc; } html[data-theme="system"] .btn-filter-clear:hover { background: #252a35; } /* ----------------------------------------------------- BOTÃO APLICAR ----------------------------------------------------- */ html[data-theme="system"] .btn-filter-apply { background: #2878f0; color: #ffffff; } html[data-theme="system"] .btn-filter-apply:hover { background: #1769df; } /* ----------------------------------------------------- BARRA DE ROLAGEM ----------------------------------------------------- */ html[data-theme="system"] .modal-filter-content::-webkit-scrollbar-track { background: transparent; } html[data-theme="system"] .modal-filter-content::-webkit-scrollbar-thumb { background: #3b4350; } } /* ========================================================= MUSICALWORLD — TEMA ESCURO MENU DA CONTA DO CABEÇALHO Responsabilidade: - Adaptar o menu que abre ao clicar em "MusicalWorld + seta". - Manter a estrutura e o comportamento originais. - Alterar somente cores, bordas e sombras no tema escuro. - Não altera HTML, JavaScript ou posicionamento. ========================================================= */ /* ========================================================= TEMA DARK ========================================================= */ html[data-theme="dark"] .cabecalho-conta-toggle { color: #f3f5f8; } html[data-theme="dark"] .cabecalho-conta-toggle:hover { background: rgba(255, 255, 255, 0.07); } html[data-theme="dark"] .logo { color: #f3f5f8; } html[data-theme="dark"] .logo:hover { color: #ffffff; } html[data-theme="dark"] .cabecalho-conta-seta { color: #9aa4b3; } html[data-theme="dark"] .cabecalho-conta-toggle:hover .cabecalho-conta-seta { color: #8ea7ff; } html[data-theme="dark"] .cabecalho-conta-toggle.aberto .cabecalho-conta-seta { color: #8ea7ff; } /* ========================================================= MENU DA CONTA ========================================================= */ html[data-theme="dark"] .cabecalho-menu-conta { background: rgba(23, 26, 34, 0.98); border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 16px 38px rgba(0, 0, 0, 0.38), 0 4px 12px rgba(0, 0, 0, 0.22); } /* ========================================================= ITENS DO MENU ========================================================= */ html[data-theme="dark"] .cabecalho-menu-conta-item { background: transparent; color: #f3f5f8; } html[data-theme="dark"] .cabecalho-menu-conta-item svg { color: #9aa4b3; } html[data-theme="dark"] .cabecalho-menu-conta-item:hover { background: rgba(109, 74, 255, 0.12); color: #a994ff; } html[data-theme="dark"] .cabecalho-menu-conta-item:hover svg { color: #a994ff; } /* ========================================================= ITEM SAIR ========================================================= */ html[data-theme="dark"] .cabecalho-menu-conta-sair { color: #c5ccd7; } html[data-theme="dark"] .cabecalho-menu-conta-sair svg { color: #9aa4b3; } html[data-theme="dark"] .cabecalho-menu-conta-sair:hover { background: rgba(220, 38, 38, 0.12); color: #ff7b7b; } html[data-theme="dark"] .cabecalho-menu-conta-sair:hover svg { color: #ff7b7b; } /* ========================================================= DIVISOR ========================================================= */ html[data-theme="dark"] .cabecalho-menu-conta-divisor { background: rgba(255, 255, 255, 0.08); } /* ========================================================= TEMA SYSTEM — DARK DO SISTEMA ========================================================= */ @media (prefers-color-scheme: dark) { html[data-theme="system"] .cabecalho-conta-toggle { color: #f3f5f8; } html[data-theme="system"] .cabecalho-conta-toggle:hover { background: rgba(255, 255, 255, 0.07); } html[data-theme="system"] .logo { color: #f3f5f8; } html[data-theme="system"] .logo:hover { color: #ffffff; } html[data-theme="system"] .cabecalho-conta-seta { color: #9aa4b3; } html[data-theme="system"] .cabecalho-conta-toggle:hover .cabecalho-conta-seta { color: #8ea7ff; } html[data-theme="system"] .cabecalho-conta-toggle.aberto .cabecalho-conta-seta { color: #8ea7ff; } /* ----------------------------------------------------- MENU DA CONTA ----------------------------------------------------- */ html[data-theme="system"] .cabecalho-menu-conta { background: rgba(23, 26, 34, 0.98); border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 16px 38px rgba(0, 0, 0, 0.38), 0 4px 12px rgba(0, 0, 0, 0.22); } /* ----------------------------------------------------- ITENS ----------------------------------------------------- */ html[data-theme="system"] .cabecalho-menu-conta-item { background: transparent; color: #f3f5f8; } html[data-theme="system"] .cabecalho-menu-conta-item svg { color: #9aa4b3; } html[data-theme="system"] .cabecalho-menu-conta-item:hover { background: rgba(109, 74, 255, 0.12); color: #a994ff; } html[data-theme="system"] .cabecalho-menu-conta-item:hover svg { color: #a994ff; } /* ----------------------------------------------------- SAIR ----------------------------------------------------- */ html[data-theme="system"] .cabecalho-menu-conta-sair { color: #c5ccd7; } html[data-theme="system"] .cabecalho-menu-conta-sair svg { color: #9aa4b3; } html[data-theme="system"] .cabecalho-menu-conta-sair:hover { background: rgba(220, 38, 38, 0.12); color: #ff7b7b; } html[data-theme="system"] .cabecalho-menu-conta-sair:hover svg { color: #ff7b7b; } /* ----------------------------------------------------- DIVISOR ----------------------------------------------------- */ html[data-theme="system"] .cabecalho-menu-conta-divisor { background: rgba(255, 255, 255, 0.08); } } /* ========================================================= MUSICALWORLD — TEMA ESCURO MODAL DE SAÍDA DA CONTA Responsabilidade: - Adaptar o ModalSaida ao tema escuro. - Preservar toda a estrutura e animação existentes. - Alterar somente cores, bordas e sombras. - Não modificar JavaScript ou comportamento do dialog. ========================================================= */ /* ========================================================= TEMA DARK ========================================================= */ html[data-theme="dark"] dialog.modal-saida::backdrop { background: rgba(0, 0, 0, 0.68); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } html[data-theme="dark"] dialog.modal-saida .modal-saida-conteudo { background: #171a22; border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48), 0 8px 28px rgba(0, 0, 0, 0.26); } /* ========================================================= ÍCONE PRINCIPAL ========================================================= */ html[data-theme="dark"] dialog.modal-saida .modal-saida-icone { background: rgba(109, 74, 255, 0.16); color: #a994ff; } /* ========================================================= ÍCONE DE ERRO ========================================================= */ html[data-theme="dark"] dialog.modal-saida .modal-saida-icone.erro { background: rgba(239, 68, 68, 0.15); color: #ff7b7b; } /* ========================================================= TÍTULO ========================================================= */ html[data-theme="dark"] dialog.modal-saida .modal-saida-texto h2 { color: #f3f5f8; } /* ========================================================= DESCRIÇÃO ========================================================= */ html[data-theme="dark"] dialog.modal-saida .modal-saida-texto p { color: #a5afbd; } /* ========================================================= BOTÃO CANCELAR ========================================================= */ html[data-theme="dark"] dialog.modal-saida .modal-saida-acoes .modal-saida-cancelar { background: #1d212b; border-color: #343b48; color: #cbd2dc; } /* ========================================================= HOVER — CANCELAR ========================================================= */ html[data-theme="dark"] dialog.modal-saida .modal-saida-acoes .modal-saida-cancelar:hover { background: #252a35; border-color: #434b59; color: #f3f5f8; } /* ========================================================= BOTÃO CONFIRMAR ========================================================= */ html[data-theme="dark"] dialog.modal-saida .modal-saida-acoes .modal-saida-confirmar { background: #6d4aff; border-color: #6d4aff; color: #ffffff; box-shadow: 0 8px 18px rgba( 109, 74, 255, 0.28 ); } /* ========================================================= HOVER — CONFIRMAR ========================================================= */ html[data-theme="dark"] dialog.modal-saida .modal-saida-acoes .modal-saida-confirmar:hover { background: #7b5cff; border-color: #7b5cff; box-shadow: 0 10px 22px rgba( 109, 74, 255, 0.34 ); } /* ========================================================= FOCO ========================================================= */ html[data-theme="dark"] dialog.modal-saida .modal-saida-acoes button:focus-visible { outline: 3px solid rgba( 169, 148, 255, 0.28 ); outline-offset: 2px; } /* ========================================================= TEMA SYSTEM — DARK DO SISTEMA ========================================================= */ @media (prefers-color-scheme: dark) { html[data-theme="system"] dialog.modal-saida::backdrop { background: rgba(0, 0, 0, 0.68); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } html[data-theme="system"] dialog.modal-saida .modal-saida-conteudo { background: #171a22; border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48), 0 8px 28px rgba(0, 0, 0, 0.26); } /* ----------------------------------------------------- ÍCONE ----------------------------------------------------- */ html[data-theme="system"] dialog.modal-saida .modal-saida-icone { background: rgba(109, 74, 255, 0.16); color: #a994ff; } /* ----------------------------------------------------- ÍCONE DE ERRO ----------------------------------------------------- */ html[data-theme="system"] dialog.modal-saida .modal-saida-icone.erro { background: rgba(239, 68, 68, 0.15); color: #ff7b7b; } /* ----------------------------------------------------- TÍTULO ----------------------------------------------------- */ html[data-theme="system"] dialog.modal-saida .modal-saida-texto h2 { color: #f3f5f8; } /* ----------------------------------------------------- DESCRIÇÃO ----------------------------------------------------- */ html[data-theme="system"] dialog.modal-saida .modal-saida-texto p { color: #a5afbd; } /* ----------------------------------------------------- CANCELAR ----------------------------------------------------- */ html[data-theme="system"] dialog.modal-saida .modal-saida-acoes .modal-saida-cancelar { background: #1d212b; border-color: #343b48; color: #cbd2dc; } html[data-theme="system"] dialog.modal-saida .modal-saida-acoes .modal-saida-cancelar:hover { background: #252a35; border-color: #434b59; color: #f3f5f8; } /* ----------------------------------------------------- CONFIRMAR ----------------------------------------------------- */ html[data-theme="system"] dialog.modal-saida .modal-saida-acoes .modal-saida-confirmar { background: #6d4aff; border-color: #6d4aff; color: #ffffff; box-shadow: 0 8px 18px rgba( 109, 74, 255, 0.28 ); } html[data-theme="system"] dialog.modal-saida .modal-saida-acoes .modal-saida-confirmar:hover { background: #7b5cff; border-color: #7b5cff; box-shadow: 0 10px 22px rgba( 109, 74, 255, 0.34 ); } /* ----------------------------------------------------- FOCO ----------------------------------------------------- */ html[data-theme="system"] dialog.modal-saida .modal-saida-acoes button:focus-visible { outline: 3px solid rgba( 169, 148, 255, 0.28 ); outline-offset: 2px; } } /* ========================================================= TEMA ESCURO — IDENTIDADE SEM MÍDIA ========================================================= */ html[data-theme="dark"] .ad-card-identidade-sem-midia { background: var(--mw-cor-superficie); } html[data-theme="dark"] .ad-card-identidade-sem-midia .ad-media-identidade, html[data-theme="dark"] .ad-card-identidade-sem-midia .ad-identidade-sem-midia, html[data-theme="dark"] .ad-card-identidade-sem-midia .ad-media-identidade-link { color: var(--mw-cor-texto); } html[data-theme="dark"] .ad-card-identidade-sem-midia .ad-media-nome { color: var(--mw-cor-texto); text-shadow: none; } html[data-theme="dark"] .ad-card-identidade-sem-midia .ad-media-tipo-localizacao { color: var(--mw-cor-texto-secundario); text-shadow: none; } html[data-theme="dark"] .ad-card-identidade-sem-midia .ad-media-tipo { color: var(--mw-cor-texto-secundario); } html[data-theme="dark"] .ad-card-identidade-sem-midia .ad-media-tipo-separador { color: var(--mw-cor-texto-suave); } html[data-theme="dark"] .ad-card-identidade-sem-midia .ad-media-localizacao-inline { color: var(--mw-cor-texto-secundario); }