boardgamearena lobby dark mode by WernerStoned

/* ==UserStyle==
@name       boardgamearena.com/lobby
@version    20241011.09.46
@namespace  ?
==/UserStyle== */

@-moz-document url-prefix("https://boardgamearena.com/lobby") {
/* Allgemeiner Hintergrund für die gesamte Seite */
.pagesection__content {
    background-color: #333131 !important; /* Dunkler Hintergrund */
    color: #fff; /* Textfarbe auf Weiß setzen */
    font-family: Roboto, Arial, sans-serif; /* Einheitliche Schrift */
}

/* Schwarzer Rand um die Spielboxen */
.game_box_image_wrap {
    border: 2px solid #202020 !important;
}

/* Schwarzer Hintergrund um die Boxen und den Bereich dahinter */
.game_box_wrap {
    background-color: #333131 !important;
    padding: 10px;
}

/* Schwarzer Hintergrund nur hinter dem Bild */
.game_box_image_wrap img {
    background-color: #202020 !important;
    padding: 10px;
}

form.hidden.tablet\:block.relative.flex-1.px-2.z-10.rounded-md.bg-white.text-gray-800 {
    background-color: darkorange !important; /* Dunkelorange Hintergrund für das Suchfeld */
    color: #fff !important; /* Weißer Text für die Eingabe */
}

form.hidden.tablet\:block.relative.flex-1.px-2.z-10.rounded-md.bg-white.text-gray-800 input {
    background-color: transparent !important; /* Eingabe transparent mit Kontrast */
    color: #000 !important; /* Schwarzer Text beim Eingeben */
    border: none !important; /* Entfernt die Standardgrenze */
}



/* Schaltflächen und Links in Gelb */
.gamename a,
.bgabutton {
    color: #ffd500 !important; /* Gelb */
    font-weight: bold; /* Optional: Schaltflächen deutlicher machen */
}

/* Weitere allgemeine Einstellungen */
body {
    background-color: #202020 !important; /* Einheitlicher Hintergrund für die gesamte Seite */
    color: #fff; /* Textfarbe auf Weiß */
}

/* Flexbox Container für die Menüleiste (z. B. Navigation) */
.flex {
    display: flex;
    background-color: #202020 !important;
    color: #fff;
}

/* Animation und Übergang für Hover-Effekte */
.bga-hover-animated-border {
    border: 3px solid rgba(255, 255, 255, 0.2);
    transition: border-color 300ms ease;
}

/* Gelber Hover-Effekt für Schaltflächen */
.bgabutton:hover {
    border-color: #ffd500;
}


/* Korrigierte Stylus-Syntax für den schwarzen Hintergrund */
.hidden.desktop\:block.bga-menu-bar__spacer.svelte-1edikia, 
.ml-5, 
.mr-3.desktop\:mr-10 {
    background-color: #202020 !important;
}

/* Schwarzer Hintergrund für #pageheaderlobby */
#pageheaderlobby {
    background-color: #202020 !important;
}

/* Schwarzer Hintergrund für #lobby_invite_friend_zone */
#lobby_invite_friend_zone {
    background-color: #202020 !important;
}



.mr-3.desktop\:mr-10 {
    background-color: #202020 !important; /* Dunkler Hintergrund */
}


#menubar-holder > div > div.bga-menu-bar.flex.svelte-1edikia .ml-5 {
    background-color: #202020 !important;
}


#menubar-holder > div > div.bga-menu-bar.flex.svelte-1edikia .ml-5 {
    background-color: #202020 !important;
    z-index: 10; /* Falls es verdeckt wird, erhöhe den z-index */
}


#pageheader_mobile_switcher_gamemode,
#pageheader_mobile_switcher,
#pageheader_mobile_switcher_lobbymode {
    background-color: #202020 !important; /* Dunkler Hintergrund für die Schalter */
    color: #fff !important; /* Weißer Text */
}


}