@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400;500;700;900&display=swap');

@use-noto-sans: true; //: name: 使用 Noto Sans 字体

* when (@use-noto-sans){
    font-family: 'Noto Sans SC', sans-serif !important;
}

@apply-main-player: true; //: name: 修改底栏 | type: checkbox
html when (@apply-main-player){
    @main-player-mixin();
}

@main-player-rounded-corner: false; //: name: 底栏大圆角模式 | type: checkbox
.m-player when(@main-player-rounded-corner){
    border-radius: 10px !important;
    .prg{
        overflow: hidden;
        border-radius: 10px !important;
    }
}

@apply-main-player-stronger-mask: false; //: name: 修改底栏：更强的遮罩 | type: checkbox

@apply-pages: true; //: name: 修改页面 | type: checkbox
html when (@apply-pages){
    .g-mn {
        @playlist-page-mixin();
        @main-page-mixin();
    }
}

@apply-playlist: true; //: name: 修改歌曲列表 | type: checkbox
html when (@apply-playlist){
    @playlist-list-mixin();
}

@apply-play-page-playbar: true; //: name: 修改播放页底栏 | type: checkbox
html when (@apply-play-page-playbar){
    @play-page-playbar-mixin();
}

@apply-play-page: true; //: name: 修改播放页 | type: checkbox
html when (@apply-play-page){
    .g-single {
        @play-page-mixin();
    }
}

@apply-play-page-white-bg: true; //: name: 修改播放页：白框 | type: checkbox

@apply-tweaks: true; //: name: 一些小调整 | type: checkbox
html when (@apply-tweaks){
    @tweaks-mixin();
}

@apply-header: true; //: name: 修改顶栏 | type: checkbox
html when (@apply-header){
    @header-mixin();
}

@rounded-corner: false; //: name: 小圆角模式 | type: checkbox
@big-rounded-corner: false; //: name: 大圆角模式 | type: checkbox
.fix-corner(){
    border-radius: if(@big-rounded-corner,16px,if(@rounded-corner,8px,0)) !important;
}

@clip-cover: false; //: name: 裁剪专辑封面 | type: checkbox

body{
    --ark-base-foreground: 0,0,0;
    --ark-base-background: 255,255,255;
}

body:not(.s-theme-white){
    --ark-base-foreground: 255,255,255;
    --ark-base-background: 27, 30, 39;
}

@tweaks-mixin: {
    .g-sd2.recommend.j-flag {
        display: none !important;
    }
    
    [class$='-icon']{
        display: none !important;
    }

    body.s-theme-white #portal_root {
        background: linear-gradient(#c3dce2, #deebef, #c4dce2);
        opacity: 1;
    }

    body:not(.s-theme-white) #portal_root{
        background: linear-gradient(#020e3b, #1b1e27);
        opacity: 1;
    }

    header ,header::after{
        background: transparent !important;
    }

    .m-tabwrap {
        background: transparent;
    }

    .g-sd {
        background: linear-gradient(-120deg, transparent,rgba(var(--ark-base-background),0.4) 90%) !important;
        border: none;
        min-width: 53px;
        backdrop-filter: blur(50px);
    }

    .bg {
        background: transparent !important;
    }

    // remove white backgrounds
    .m-timeline .m-dtool,
    .g-setHd,
    .g-sd-set,
    .g-mn-set,
    .m-uinfo {
        background: transparent !important;
    }

    //
    :root {
        --icnTheme: #000;
        --themeC1: #000;
        --themeC1-rgb: 0, 0, 0;
    }
}

@playlist-list-mixin: {
    .m-playlist.z-show {
        box-shadow: 1px 2px 6px rgb(0 0 0 / 14%);
        background: rgba(255, 255, 255, 0.25);
        backdrop-filter: blur(30px);
        bottom: 0;

        ul {
            padding-bottom: 100px;
        }
    }
}

@header-mixin: {
    .m-logo {
        display: none;
    }

    .m-leftbox {
        left: 0 !important;
        .m-topbox {
            .mq-playing & {
                visibility: hidden;
            }
            .m-hst > *,
            .m-sch > input,
            .j-listentosong > a {
                background: transparent !important;
                .fix-corner();
            }
            .m-sch {
                .fix-corner();
                transform: scale(0.8);

                .sch-btn {
                    svg {
                        display: none;
                    }
                    pointer-events: none;
                    &::before {
                        content: "S E A R C H";
                        left: 40px;
                        font-weight: 800;
                        top: 5px;
                        position: absolute;
                        width: 200px;
                        opacity: 1;
                        transition: opacity 0.2s;
                    }
                }

                input {
                    opacity: 0;
                    transition: opacity 0.2s;
                    padding: 16px;

                    &::-webkit-input-placeholder {
                        font-size: 13px;
                    }
                }

                &:hover input {
                    opacity: 1;
                }

                &:hover .sch-btn::before {
                    opacity: 0;
                }

                &::before,
                &::after {
                    content: "";
                    left: -3px;
                    top: -3px;
                    width: 7px;
                    height: 7px;
                    background-color: rgb(var(--ark-base-foreground));
                    position: absolute;
                }

                &::after {
                    left: unset;
                    top: unset;
                    right: -3px;
                    bottom: -3px;
                    transform: rotate(900deg);
                }
            }
        }
    }
}

@main-player-mixin: {
    @main-player-margin: 2em;
    @main-player-max-width: 70em;
    @main-player-height: 6em; // hardcoded in ncm css

    body {
        // adjust height
        .g-mn {
            bottom: 0px;
            padding-bottom: @main-player-height;
        }
        
        position: fixed;
        overflow: visible;
    }

    // remove ncm's default open animation
    .m-player,
    .m-player .spk.z-silence:after,
    .m-pinfo .info-new {
        transition: none !important;
    }

    // Play info
    .m-pinfo {
        .oper{
            pointer-events: none;
        }
        bottom: calc(@main-player-height - 3 * @main-player-margin) !important;
        margin: @main-player-margin calc(50% - @main-player-max-width / 2);
        max-width: 270px;
 
        // Cover
        .pic,
        .cover,
        .lnk {
            .fix-corner();
        }
        .cover {
            box-shadow: if(@apply-main-player-stronger-mask,
                        1px 1px 7px rgba(0, 0, 0, 0.089),
                        1px 1px 5px rgba(0, 0, 0, 0.459));
        }
    }

    // Adapt to plugin LyricBar
    .lyric-bar{
        margin-right: calc(50% - @main-player-max-width / 2 - 10px);
        margin-bottom: @main-player-margin;
        background: if(@apply-main-player-stronger-mask,rgba(var(--ark-base-background), 0.8),rgba(var(--ark-base-background), 0.25)) !important;
        box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.137);
        backdrop-filter: blur(16px);
        .fix-corner();
    }

    .m-player,.m-player#main-player {
        box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.137);
        bottom: calc(@main-player-height - 3 * @main-player-margin);
        margin: @main-player-margin auto;
        max-width: @main-player-max-width;
        border-top: none;
        background: if(@apply-main-player-stronger-mask,rgba(var(--ark-base-background), 0.8),rgba(var(--ark-base-background), 0.25)) !important;
        backdrop-filter: blur(16px);
        border-radius: 2px;
        // Progress bar
        .prg {
            z-index: 99999 !important;
            top: 0 !important;
           
            height: 10px;
            margin: 0;
            left: 0;
            right: 0;

            & when (not(@main-player-rounded-corner)){
                &,*{
                    border-radius: 0 !important;
                }
            }

            .ctrl {
                opacity: 0;
            }

            .track,
            .download {
                padding: 0;
                top: 0;
            }

            .has {
                top: 0;
                background: rgba(var(--ark-base-foreground), 0.568);
            }
        }

        // hide time
        time {
            display: none;
        }

        // Buttons
        .btnc,
        .btnp,
        .type,
        .word {
            background: transparent;
            margin-top: 7px;
        }
    }

    // Sidebar
    .g-sd {
        bottom: 0;
    }
}

@main-page-mixin: {
    .m-banner {
        display: none;
    }
    .m-tabwrap{
        position: absolute;
        top: 0;
    }
}

@playlist-page-mixin: {
    .itm {
        margin: 0 20px;
        border-radius: 3px;
        font-weight: 700;
        padding: 6px 5px !important;

        &:not(:hover):not(.z-sel) {
            background: transparent !important;
        }
    }

    .user {
        .u-face {
            display: none;
        }
        .uname {
            margin-left: 0;
            font-weight: 700;
            color: rgba(var(--ark-base-f),0.4);
        }
    }

    .u-cover {
        &,
        & * {
            .fix-corner();
        }
    }

    .u-rtag {
        display: none;
    }

    .btns {
        flex-direction: column;
        width: max-content;
        & when (not(@rounded-corner)){
            border: 1px solid var(--ark-base-background);
            background: rgba(var(--ark-base-background), 0.445);
        }
        & when (@rounded-corner){
            background: rgba(var(--ark-base-background), 0.445);
        }
        .fix-corner();
        overflow: hidden;
        & > *:nth-child(1) {
            width: 100%;
            
            background: rgb(var(--ark-base-background));
            color: rgb(var(--ark-base-foreground)) !important;
            overflow: hidden;
            .u-ibtn5:nth-child(1){
                width: calc(100% - 35px);
            }

            *,*::before,*::after{
                color: rgb(var(--ark-base-foreground)) !important;
                fill: rgb(var(--ark-base-foreground)) !important;
            }
        }
        * {
            border-radius: 0 !important;
            border: none;
            text-align: left;
            margin: 0;
        }
    }

    .inf,
    .mnum,
    .intr {
        display: none;
    }

    .g-wrap0 {
        padding-bottom: 0;
    }

    .u-tab2 {
        & > *:nth-child(1) {
            border-bottom: 1px solid rgba(var(--ark-base-foreground),0.4);
            * {
                font-size: 14px;
            }
            .j-flxg:not(.z-sel) {
                color: gray;
            }
            .z-sel {
                font-size: 14px;
                &::before {
                    width: 100%;
                    bottom: -2px;
                    background: rgb(var(--ark-base-foreground));
                    .fix-corner();
                }
            }
        }
    }

    .u-micn-loved,
    .u-micn {
        background: rgb(var(--ark-base-foreground));
    }
}

@play-page-mixin: {
    height: 100%;

    .n-single {
        margin-top: -20px;
    }

    .cdwrap,
    .cdin,
    .cdimg,
    img {
        // left: 50px;
        .fix-corner();
        
        &:not(.cdimg){
            box-shadow: none !important;
        }
        & when(@clip-cover){
            max-width: 220px;
            object-fit: cover;
        }
    }

    .cdimg {
        filter: drop-shadow(rgba(0, 0, 0, 0.103) 2px 3px 10px);
    }

    .content {
        transform: translateY(-15%);
        justify-content: flex-end;
        padding-bottom: 100%;

        & when(@apply-play-page-white-bg){
            overflow: hidden;
            backdrop-filter: blur(10px);
            background: linear-gradient(transparent, rgba(255, 255, 255, 0.425));
            box-shadow: 1px 2px 12px rgba(0, 0, 0, 0.034);
        }
        
        max-width: 300px;
        left: 30px;
        top: 10px;
        position: fixed;
        bottom: 0px;
        height: calc(100vh + 70px) !important;

        .tag-wrap {
            display: none !important;
        }
        .title .name {
            top: 0px;
            font-size: 20px;
            position: absolute;
            & when (@apply-play-page-white-bg){
                -webkit-mask-image: linear-gradient(
                    90deg,
                    black,
                    black,
                    98%,
                    transparent 99%
                );
                max-width: 80%;
            }
            padding-left: 17px;
            font-weight: 700;
            word-break: keep-all;
           

            text-overflow: ellipsis;
            white-space: nowrap;

            &::before {
                position: absolute;
                left: 0;
                bottom: 0;
                top: 0;
                width: 7px;
                background: var(--rnp-accent-color-shade-2);
                content: "";
                .fix-corner();
            }
        }
            
        .alias{
            font-size: 13px !important;
            text-overflow: ellipsis;
            word-break: keep-all !important;
            white-space: nowrap !important;
            width: 90%;
        }
    }



    .f-cb {
        // Comments
        margin: 0;
        right: 0;
        width: calc(100vw - 500px);

        img.normal{
            transform: translateX(-50px);
        }

        
        .g-mn2c, div:not(.g-mn2c) > .g-mn2{
            position: absolute;
            left: 360px !important;
        }

        .m-comment {
            width: 100%;
            padding: 20px;
            margin: 0 !important;

            .m-page{
                width: 60%;
            }
        }

        .recommend-btn {
            display: none;
        }
    }
}

@play-page-playbar-mixin: {
    body:not(.lyric-only) .m-player.z-shadow {
        
        .prg when (not(@apply-play-page-white-bg)){
            left: 30px;
            right: 30px;
        }
        .prg{
            &,*{
                border-radius: 0 !important;
            }
        }
        @keyframes MPlayerEnterRefAnim{
            0%{
                display: none;
            }
            99%{
                display: block;
            }
            100%{
                display: block;
            }
        }

        animation: MPlayerEnterRefAnim 1s forwards;

        *{
            animation: MPlayerEnterRefAnim 1s forwards;
        }

        overflow: visible;
        box-shadow: unset;
        backdrop-filter: none;
        background: transparent !important;
        width: 300px;
        margin: -10px 0 0 30px;
        bottom: 10%;

        & > *:not(.btnc):not(.btnp):not(.prg):not(.j-vol) {
            display: none;
        }

        .j-vol {
            &.prg-spk {
                opacity: 0.4 !important;
                display: block !important;
                background: transparent;
                position: absolute;
                height: 105px;
                top: -330px;

                *,
                *:not(.track):not(.has)::before {
                    background: transparent;
                    width: 10px;
                }

                *,
                *::before {
                    border-radius: 0 !important;
                }

                left: 20px;

                .has,
                .track {
                    opacity: 0;
                    transition: opacity 0.1s, margin-left 0.1s;
                    margin-left: -20px;
                }
                &:hover {
                    opacity: 1 !important;

                    .has,
                    .track {
                        margin-left: -15px;
                        opacity: 1;
                    }
                }

                &::before {
                    display: block;
                    content: "VOLUME";
                    position: absolute;
                    writing-mode: vertical-lr;
                    letter-spacing: 10px;
                    top: 15px;
                    z-index: 10;
                    color: rgba(var(--rnp-accent-color-shade-2-rgb), 0.4);
                    font-weight: 900;
                }
            }

            svg {
                display: none;
            }
        }
    }

    body:not(.lyric-only) .g-sd ~ div > .m-pinfo:not(.z-show),
    body:not(.lyric-only) .g-mn.one:not([style^="--rnp-"]) ~ .m-pinfo:not(.z-show) {
        margin: 30px 0 0 30px;
        padding: 0 15px;
        .oper{
            pointer-events: unset !important;
        }
        width: 300px;
        .oper {
            top: 10px;
            *{
                background: transparent;
            }
        }
        
        bar:not(.oper){
            display:none;
        }

        overflow: visible;

        .btns {
            transform: translateY(-10px);
            width: 100%;
            position: none !important;
            left: 0 !important;
            * {
                cursor: pointer;
                opacity: 1;
                transition: all 0.2s !important;
                width: 38px;
                margin: 0;
                border: none;
            }
            &:not(:hover) > *:not(.btn-love) {
                width: 0;
                opacity: 0 !important;
            }

            & > *:nth-child(2),
            & > *:nth-child(4) {
                order: -1;
            }

            & > .btn-love {
                order: 0;
                opacity: 1 !important;
                display: block;
                overflow: visible;
                &.loved {
                    svg {
                        display: block !important;
                    }
                }
                &::before {
                    display: none !important;
                }
            }
        }
    }
}
