Hoyolab - Dark Theme by dark-themes

/* ==UserStyle==
@name         Hoyolab - Dark Theme
@namespace    Dark-Themes
@version      1.0.1
@description  Hoyolab Dark Theme
@author       Dark-Themes
@supportURL   https://github.com/KanashiiDev/personal-stylesheets/issues
@var range    fg_slider  'Foreground Color' [24, 1, 50, 1,'']
@var checkbox fullgray 'Full Gray' 1
@var checkbox custom-bg 'Custom Background Image' 0
@var text     bg_image 'Background Url' '' url ''
@var range    opacity  'Content Opacity' [1, 0.90, 1, 0.01]
@var range    bg_brightness  'Background Brightness' [100, 1, 200.0, 1,'%']
@var range    bg_saturate  'Background Saturation' [100, 1, 300.0, 1,'%']
@var range    bg_contrast  'Background Contrast' [100, 100, 300.0, 1,'%']
@var range    bg_blur  'Background Blur' [0, 0.0, 15, 1.0,'px']
@var checkbox removefooter 'Hide Footer' 0
@preprocessor stylus
==/UserStyle== */
@-moz-document url-prefix("https://www.hoyolab.com/"), url-prefix("https://creator.hoyolab.com/") {
    :root {
        --fg: #000 + (fg_slider);
        --bg: #0b0b0b + (fg_slider) - 25;
        --btnbg: #000 + (fg_slider) + 25;
        --btnhover: #000 + (fg_slider) + 40;
        --font: #c1c1c1;
        --fontselected: #ddd;
        --fonthover: #eee;
        --cardhover: #000 + (fg_slider) + 15;
        --cardhoverlight: #000 + (fg_slider) + 12;
        --focus: #000 + (fg_slider) + 60;
        if(fg_slider < 10) {
            --bg: #0b0b0b - (fg_slider)
        }
    }
    body {
        --default-body-color: var(--bg);
        --topic-theme-bg-color: var(--bg);
        --side-card-bg: var(--fg);
        --card-bg-color: var(--fg);
        --primary-white-color: var(--fg);
        --topic-theme-card-color: var(--fg);
        --button-font-color: var(--font);
        --header-icon-color: var(--font);
        --search-input-icon-active-color: var(--font);
        --default-gray-color: var(--btnbg);
        --button-background-color: var(--btnbg);
        --default-border-color: var(--btnhover);
        --button-background-color-hover: var(--btnhover);
        --side-hover-bg: var(--cardhover);
        --recommend-author-game-hover: var(--cardhover);
        --default-hover-background-color: var(--cardhover);
        --default-active-background-color: var(--cardhover);
        --default-icon-hover-background-color: var(--cardhover);
        --star-rank-bg: var(--cardhoverlight);
        --vote-bg-color: var(--cardhoverlight);
        --popup-bg-color: var(--cardhoverlight);
        --popover-bg-color: var(--cardhoverlight);
        --activity-ended-bg: var(--cardhoverlight);
        --lighter-gray-color: var(--cardhoverlight);
        --block-tag-bg-color: var(--cardhoverlight);
        --reddot-border-color: var(--cardhoverlight);
        --global-notification-bg: var(--cardhoverlight);
        --daily-post-data-card-bg: var(--cardhoverlight);
        --lighter-background-color: var(--cardhoverlight);
        --default-background-color: var(--cardhoverlight);
        --creator-center-bg-color-1: var(--cardhoverlight);
        --creator-center-bg-color-2: var(--cardhoverlight);
        --creator-center-bg-color-3: var(--cardhoverlight);
        --creator-center-bg-color-4: var(--cardhoverlight);
        --default-lighter-border-color: var(--cardhoverlight);
        --creator-center-card-bg-color: var(--cardhoverlight);
        --default-background-color-disabled: var(--cardhoverlight);
        --search-gradient-mask: linear-gradient(270deg, var(--primary-white-color) 2.99%, var(--primary-white-color) 29.08%, rgba(44, 44, 44, 0) 100%);
        --search-result-special-color: linear-gradient(180deg, var(--cardhover) 0%, rgba(54, 63, 126, 0) 100%);
    }
    ::-webkit-scrollbar {
        background-color: #111;
    }
    body,
    html {
        background-color: var(--bg);
    }
    .mhy-popover-block,
    .mhy-follow-button .mhy-icon,
    .strategy-channel-list-header__more__title,
    .mhy-select.mhy-select-outlined:hover .icon-select_arrow,
    .mhy-tools-container .tools-header-main .custom-side-title-container > .text,
    .hyl-new-post-card .hyl-post-draft i,
    .hyl-new-post-card .hyl-post-draft,
    .mhy-post-new.mhy-header-post-new .mhy-post-new__post:hover .mhy-icon,
    .header-newpost-dialog__draft:hover,
    .header-newpost-dialog__draft:hover .mhy-icon,
    .mhy-side-section__more,
    .mhy-tools-container .tools-header-main .tools-pagination .pager-number:hover,
    .mhy-tools-container .tools-header-main .tools-pagination .pager-number.active {
        color: var(--font)
    }
    .hyl-group-b .mhy-side-section__title {
        color: var(--font)!important
    }
    .channel-collection__center-card:hover .center-card--content__title,
    .guide-recommend-post-common .recommend-post:hover .recommend-post-content .recommend-post-content__title,
    .strategy-mini-card .strategy-mini-card-item:hover .strategy-mini-card-text,
    .mhy-search-side-list__item:hover,
    .hyl-group-b .mhy-search-history-section .mhy-side-section__header .mhy-icon:hover,
    .account-center-topbar__container .account-center-btn-group .user-action-wrapper:hover .mhy-action__button i,
    .mhy-tools-container .tools-header-main .custom-side-title-container:hover .text,
    .header-account-menu-item--active .header-account-menu-item__content .mhy-icon,
    .header-account-menu-item--active .header-account-menu-item__content,
    .mhy-tools-container .tools-header-main .custom-side-title-container:hover .mhy-icon {
        color: var(--fontselected)
    }
    .mhy-hoyolab-header-dark .mhy-hoyolab-header__wrapper .mhy-hoyolab-select-menu,
    .mhy-hoyolab-header-dark .mhy-hoyolab-header__wrapper {
        background-color: var(--fg)
    }
    .mhy-hoyolab-header-dark .mhy-hoyolab-header__wrapper .mhy-hoyolab-select-menu__item:hover .mhy-hoyolab-header-dark .mhy-hoyolab-header__wrapper .mhy-hoyolab-lang-selector,
    .mhy-guider-popover,
    .mhy-guider-popover__arrow,
    .mhy-tooltip-block,
    .mhy-switch-tab__line,
    .hyl-group-b .header__inner .header-tab-wrapper .header-tab__underline,
    .mhy-tools-container .swiper-nav:hover {
        background-color: var(--cardhover)
    }
    .mhy-switch,
    .mhy-tools-container .swiper-nav,
    .mhy-switch--active {
        background-color: var(--cardhoverlight)
    }
    .hyl-group-b .root-page-container {
        opacity: (opacity)
    }
    .mhy-page-header-mask,
    .hyl-group-b .mhy-home,
    .hyl-group-b .mhy-home > div > div > div > div > div > div,
    .recommend-user-card,
    .mhy-recommend-user-list-skeleton .mhy-recommend-user-list-side .mhy-user-card:hover {
        background: transparent
    }
    .mhy-img-article__thumb.swiper-slide::after,
    .mhy-tooltip-block__arrow {

        border-color: transparent transparent var(--cardhover) transparent;
    }
    if(custom-bg) {
        .hyl-group-b .root-page-container {
            -webkit-backdrop-filter: blur(bg_blur)brightness(bg_brightness)contrast(bg_contrast)saturate(bg_saturate)!important;
            backdrop-filter: blur(bg_blur)brightness(bg_brightness)contrast(bg_contrast)saturate(bg_saturate)!important;
            background: none!important
        }
        body {
            background: url(bg_image)!important;
            background-size: cover!important;
            background-attachment: fixed!important;
        }
        .bot-layer-bg {
            display: none;
        }
        .hyl-group-b[data-route-name^=circles] .root-page-container {
            margin: 0
        }
    }
    if(removefooter) {
        .hyl-group-b .footer {
            display: none
        }
    }
    if(fullgray) {
        body {
            --primary-color: var(--font);
        }
        .mhy-game-sign .mhy-game-sign-info .resign-info:hover .resign-info-title-wrapper .resign-info-title,
        .mhy-game-sign .mhy-game-sign-info .resign-info:hover .resign-info-title-wrapper .resign-info-missing,
        .mhy-game-sign .mhy-game-sign-info .resign-info:hover .resign-info-title-wrapper .calendar,
        .mhy-game-sign .mhy-game-sign-info .resign-info:hover .iconfont,
        .hyl-recommend-search__pagination .icon:hover .mhy-icon,
        .mhy-hoyolab-lang-selector.actived .mhy-hoyolab-lang-selector__current-lang,
        .mhy-hoyolab-select-menu__item:hover,
        .mhy-hoyolab-select-menu__item--selected,
        .app-pc .time-axis-article-list .time-axis-article-list__header .header-more,
        .mhy-level-info-log__today-exp,
        .mhy-level-info-log .mhy-level-info-list dd,
        .mhy-level-status__exptext,
        .mhy-level-mission-list__exp span,
        .mhy-level-info__exptext,
        .account-center-topbar__container .account-center-basic-rows .account-center-basic-item:hover .account-center-basic-num,
        .mhy-news-card:hover .mhy-news-card__title,
        .login-box-side_bottom__btn,
        .topbar-game-select .mhy-float-dialog .circles-games-select .mhy-switch-tab .mhy-switch-tab__list .circles-games-cell--active .game-name,
        .ql-snow.ql-toolbar button:hover,
        .ql-snow .ql-toolbar button:hover,
        .ql-snow.ql-toolbar button:focus,
        .ql-snow .ql-toolbar button:focus,
        .ql-snow.ql-toolbar button.ql-active,
        .ql-snow .ql-toolbar button.ql-active,
        .ql-snow.ql-toolbar .ql-picker-label:hover,
        .ql-snow .ql-toolbar .ql-picker-label:hover,
        .ql-snow.ql-toolbar .ql-picker-label.ql-active,
        .ql-snow .ql-toolbar .ql-picker-label.ql-active,
        .ql-snow.ql-toolbar .ql-picker-item:hover,
        .ql-snow .ql-toolbar .ql-picker-item:hover,
        .ql-snow.ql-toolbar .ql-picker-item.ql-selected,
        .ql-snow .ql-toolbar .ql-picker-item.ql-selected,
        .editor-container #toolbar.ql-toolbar button.tool-button:hover .mhy-icon,
        .mhy-new-richtext-article .cover-entry:hover,
        .mhy-new-article-op .cover-entry:hover,
        .mhy-new-richtext-article .cover-entry:hover i,
        .mhy-new-article-op .cover-entry:hover i,
        .ql-toolbar-header .editor-tool-popup.ql-tool...