/* ==UserStyle==
@name           HoYoLAB optimized for wide screens
@description    HoYoLAB website interface is reworked to offer a cleaner and comfortable experience on desktop, with visual adjustments that adapt to your needs.
@version        1.0.2
@author         BreatFR
@namespace      https://breat.fr
@homepageURL    https://usercssjs.breat.fr/h/hoyolab
@updateURL      https://code.breat.fr/h/hoyolab/css/pc.user.css
@supportURL     https://discord.gg/Q8KSHzdBxs
@license        AGPL-3.0-or-later; https://www.gnu.org/licenses/agpl-3.0.txt
==/UserStyle== */

/* ==Credits==
Website         https://breat.fr
Bluesky			https://bsky.app/profile/breatfroff.bsky.social
facebook        https://www.facebook.com/breatfroff
mastodon        https://mastodon.social/@breat_fr
telegram        https://t.me/breatfr
vk              https://vk.com/breatfroff
X (twitter)     https://x.com/breatfroff
==/Credits== */

/* ==Support==
brave Creators  https://publishers.basicattentiontoken.org/c/breatfr
ko-fi           https://ko-fi.com/breatfr
PayPal          https://paypal.me/breat
==/Support== */

@-moz-document domain("hoyolab.com") {
    ::-webkit-scrollbar {
      width: 5px !important;
    }

    ::-webkit-scrollbar:horizontal {
        height: 5px !important;
    }

    ::-webkit-scrollbar-track {
        box-shadow: inset 0 0 5px grey !important;
        border-radius: 20px !important;
        color-scheme: dark !important;
    }

    ::-webkit-scrollbar-thumb {
        box-shadow: inset 0 0 5px grey !important;
        border-radius: 20px !important;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: white !important;
    }

    * {
        scrollbar-color: grey white !important;
        scrollbar-width: thin !important;
    }

    #anchor_spiral_abyss > div.container,
    body > div.pc-root-layout > div.pc-root-layout__container > div > div {
        max-width: 100% !important;
    }

    .root-page-container__content {
        max-width: 100% !important;
    }

    .mhy-article-card__cover img {
        max-height: 100% !important;
    }

    .mhy-article-card__cover {
        left: 15% !important;
    }

    .mhy-article-card__img {
        left: 25% !important;
    }

    .mhy-article-card__video {
        left: 20% !important;
    }

    .root-page-container__left {
        margin-left: 10px;
        max-width: 100% !important;
    }

    .root-page-container__right {
        margin-right: 10px;
    }

    body > div.app-root > div > div.scroll-container.main-wrapper > div,
    body > div.app-root > div > div.scroll-container.main-wrapper > div > div.page-body.body {
        border-radius: 16px !important;
        width: 100% !important;
    }

    .pc-root-layout__container {
        max-width: 100% !important;
        padding-left: 10px;
        padding-right: 10px;
    }

    #anchor_character > div.pc-swiper-block-layout__content > div.container {
        width: 50% !important;
    }

    #anchor_character > div.pc-swiper-block-layout__content > div.pc-role-container {
        height: 450px !important;
    }

    .rpg-role-detail {
        height: 450px !important;
        left: 110% !important;
        position: absolute !important;
        top: 0px !important;
    }

    .hsr-rtn-container {
        margin-left: 25% !important;
    }

    .article-menu-fix-layout {
        margin-left: 10px !important;
    }

    .hsr-rtn-btm {
        margin-left: 1.2% !important;
    }

    .activity-header.mb-2.flex.items-center {
        margin-left: -47.5% !important;
    }

    .activity-header.mb-2.flex.items-center > div {
        margin-left: 32.5% !important;
    }

    .world-exploration > div {
        max-width: 100% !important;
    }

    .hsr-home-main,
    .hsr-home-main-container,
    .pc-home-banner {
        margin-left: 5px;
        width: calc(100% - 60px) !important;
    }

    .menu-outline {
        right: 0px !important;
    }
}