YouTube Music With Center Buttons by xdgiesus

/* ==UserStyle==
@name xdgiesus
@namespace xdgiesus.com
@version 1.0.0
@description xd
@author xDgiesus
==/UserStyle== */

@-moz-document domain("example.com") {/* --- Cores e Estilos do Spotify --- */
:root {
    --spotify-green: #1DB954;
    --spotify-green-hover: #1ED760;
    --spotify-black: #121212;
    --spotify-dark-gray: #181818;
    --spotify-light-gray: #282828;
    --sidebar-width: 250px;
    --player-controls-height: 72px;
}

/* Corpo e layout do YouTube Music */
body, ytmusic-app-layout {
    background-color: var(--spotify-black) !important;
    color: white !important;
}

/* Remover o logo do YouTube Music */
ytmusic-nav-bar #logo,
ytmusic-nav-bar #left-content {
    display: none !important;
}

/* Garantir que o botão "Início" fique acessível */
ytmusic-guide-entry-renderer:first-child {
    margin-top: 0 !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Sidebar (Início, Explorar, etc.) */
ytmusic-guide-renderer {
    position: fixed;
    left: 0;
    top: 0;
    width: var(--sidebar-width) !important;
    height: 100vh !important;
    background: var(--spotify-dark-gray) !important;
    padding-top: 20px;
    z-index: 1000;
    border-right: 1px solid var(--spotify-light-gray);
}

/* Estilo dos itens da sidebar */
ytmusic-guide-entry-renderer {
    width: 100%;
    text-align: left;
    color: white !important;
    padding-left: 20px;
}

/* Destacar itens ativos na sidebar */
ytmusic-guide-entry-renderer[selected],
ytmusic-guide-entry-renderer:hover {
    color: var(--spotify-green) !important;
    background-color: var(--spotify-light-gray) !important;
}

/* Centralizar a barra de controle de música */
ytmusic-player-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: var(--spotify-dark-gray) !important;
    border-top: 1px solid var(--spotify-light-gray) !important;
    padding: 10px 0;
}

/* Ajustar os controles para manter o centro fixo */
ytmusic-player-bar #left-controls,
ytmusic-player-bar #right-controls {
    flex: 1; /* Ocupa o mesmo espaço */
    display: flex;
    justify-content: center;
}

ytmusic-player-bar #center-controls {
    flex: 2; /* Dá mais espaço para o centro */
    display: flex;
    justify-content: center;
}

/* Botões de controle (play, pause, avançar, voltar) */
ytmusic-player-bar paper-icon-button {
    color: var(--spotify-green) !important;
}

/* Efeito de hover para os botões */
ytmusic-player-bar paper-icon-button:hover {
    color: var(--spotify-green-hover) !important;
}

/* Tornar o botão de volume sempre visível */
ytmusic-player-bar ytmusic-volume-slider {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
    width: auto !important;
    max-width: none !important;
}

/* Estilo de thumb (manípulo) na barra de volume */
ytmusic-player-bar ytmusic-volume-slider::-webkit-slider-thumb {
    background-color: var(--spotify-green) !important;
}

ytmusic-player-bar ytmusic-volume-slider::-moz-range-thumb {
    background-color: var(--spotify-green) !important;
}

/* Barra de progresso do player */
ytmusic-player-bar ytmusic-player-bar-progress {
    --ytmusic-player-bar-progress-color: var(--spotify-green) !important;
}

/* Estilo dos botões de navegação na barra de pesquisa e notificações */
ytmusic-nav-bar paper-icon-button {
    color: white !important;
}

ytmusic-nav-bar paper-icon-button:hover {
    color: var(--spotify-green) !important;
}

/* Ajustar a cor de texto destacado */
yt-formatted-string[has-link-only_]:not([is-empty]) {
    color: var(--spotify-green) !important;
}

/* --- Seção Descobertas da Semana --- */
.discovery-section {
    padding: 20px;
    background: var(--spotify-dark-gray);
    color: white;
    border-top: 1px solid var(--spotify-light-gray);
    margin-top: 20px;
}

.discovery-section h2 {
    color: var(--spotify-green);
}

.discovery-track-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.discovery-track-item {
    flex: 1 0 30%;
    text-align: center;
}

.discovery-track-item img {
    width: 100%;
    border-radius: 10px;
}

.discovery-button {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 20px;
    background-color: var(--spotify-green);
    color: white;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
}
*/ 
}