/*
需要调整手机版的位置和钢琴整个的大小

js部分用隐藏的音频，然后播放
键盘框架边框2个，1vw
文字大小不是横向的
15个黑键宽3
21个白键宽4
*/

body {
    margin: 0;
    padding: 0;
    /*background-color: rgb(255, 255, 255);*/
    user-select: none;
}

#tips {
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 100%;
    color: rgb(214, 214, 214);
}


/* 键盘外部框架 */

#keyboard {
    position: absolute;
    background-color: rgb(128, 128, 128);
    font-size: 0;
    /* 兼容防止间距出现空白 */
    left: 50%;
    margin-left: -43vw;
    border: 1vw solid rgb(128, 128, 128);
}


/* 每个key组 */

#keyboard>section[class*="key"] {
    -webkit-text-size-adjust: none;
    display: inline-block;
}


/* 全体按键 */

#keyboard>section[class*="key"]>.black,
#keyboard>section[class*="key"]>.white {
    text-align: center;
    user-select: none;
    display: inline-block;
    font-size: 1.3vw;
}


/* 黑色按键 */

#keyboard>section[class*="key"]>.black {
    background-color: rgb(44, 44, 44);
    color: rgb(173, 173, 173);
    position: absolute;
    width: 3vw;
}


/* 白色按键 */

#keyboard>section[class*="key"]>.white {
    background-color: rgb(243, 243, 243);
    color: rgb(134, 134, 134);
    width: 4vw;
}


/* 黑色按键：鼠标划过 */

#keyboard>section[class*="key"]>.black:hover {
    background-color: rgb(59, 59, 59);
}


/* 白色按键：鼠标划过 */

#keyboard>section[class*="key"]>.white:hover {
    background-color: rgb(255, 255, 255);
}

#keyboard>section[class*="key"]>.black>.text {
    border: 0.1vw solid rgb(158, 158, 158);
    padding-top: 6.5vw;
}

#keyboard>section[class*="key"]>.white>.text {
    border: 0.1vw solid rgb(158, 158, 158);
    padding-top: 12vw;
}

.pianoKeyDown {
    background-color: rgb(255, 255, 134) !important;
}


/* 键盘键位提示  */

#keyboard>section[class*="key"]>.black>.text>span,
#keyboard>section[class*="key"]>.white>.text>span {
    font-size: 1vw;
    /* 小于1vw不生效 */
}

#keyboard>section[class*="key"]>.black>.text>span {
    color: rgb(112, 112, 112);
}

#keyboard>section[class*="key"]>.white>.text>span {
    color: rgb(204, 204, 204);
}

#Ch4 {
    left: 2.5vw;
}

#Dh4 {
    left: 6.5vw;
}

#Fh4 {
    left: 14.5vw;
}

#Gh4 {
    left: 18.5vw;
}

#Ah4 {
    left: 22.5vw;
}

#Ch5 {
    left: 30.5vw;
}

#Dh5 {
    left: 34.5vw;
}

#Fh5 {
    left: 42.5vw;
}

#Gh5 {
    left: 46.5vw;
}

#Ah5 {
    left: 50.5vw;
}

#Ch6 {
    left: 58.5vw;
}

#Dh6 {
    left: 62.5vw;
}

#Fh6 {
    left: 70.5vw;
}

#Gh6 {
    left: 74.5vw;
}

#Ah6 {
    left: 78.5vw;
}


/* 键盘按键提示 */


/* 4 */

#C4>div>span::before {
    content: 'Z';
}

#Ch4>div>span::before {
    content: 'S';
}

#D4>div>span::before {
    content: 'X';
}

#Dh4>div>span::before {
    content: 'D';
}

#E4>div>span::before {
    content: 'C';
}

#F4>div>span::before {
    content: 'V';
}

#Fh4>div>span::before {
    content: 'G';
}

#G4>div>span::before {
    content: 'B';
}

#Gh4>div>span::before {
    content: 'H';
}

#A4>div>span::before {
    content: 'N';
}

#Ah4>div>span::before {
    content: 'J';
}

#B4>div>span::before {
    content: 'M';
}


/* 5 */

#C5>div>span::before {
    content: 'Q,';
}

#Ch5>div>span::before {
    content: '2L';
}

#D5>div>span::before {
    content: 'W.';
}

#Dh5>div>span::before {
    content: '3;';
}

#E5>div>span::before {
    content: 'E/';
}

#F5>div>span::before {
    content: 'R';
}

#Fh5>div>span::before {
    content: '5';
}

#G5>div>span::before {
    content: 'T';
}

#Gh5>div>span::before {
    content: '6';
}

#A5>div>span::before {
    content: 'Y';
}

#Ah5>div>span::before {
    content: '7';
}

#B5>div>span::before {
    content: 'U';
}


/* 6 */

#C6>div>span::before {
    content: 'I';
}

#Ch6>div>span::before {
    content: '9';
}

#D6>div>span::before {
    content: 'O';
}

#Dh6>div>span::before {
    content: '0';
}

#E6>div>span::before {
    content: 'P';
}

#F6>div>span::before {
    content: '[';
}

#Fh6>div>span::before {
    content: '=';
}

#G6>div>span::before {
    content: ']';
}

#Gh6>div>span::before {
    content: '';
}

#A6>div>span::before {
    content: '';
}

#Ah6>div>span::before {
    content: '';
}

#B6>div>span::before {
    content: '';
}


/* 响应式布局：当屏幕小于xxx像素时，仅显示C5键盘 */

@media screen and (max-width: 850px) {
    #keyboard>section[class="key4"],
    #keyboard>section[class="key6"] {
        display: none;
    }
    #keyboard {
        /* 以下不能动，是把上面的代码定位归位 */
        /* left: 0; */
        /* margin-left: 0; */
        /* 调好键盘整体大小之后改变 */
        margin-left: -48.7vw;
    }
    /* 全体x2.0x1.7(x3.4)倍 */
    /* 全体按键 */
    #keyboard>section[class*="key"]>.black,
    #keyboard>section[class*="key"]>.white {
        text-align: center;
        user-select: none;
        display: inline-block;
        font-size: 4.42vw;
    }
    /* 黑色按键 */
    #keyboard>section[class*="key"]>.black {
        width: 10.2vw;
    }
    /* 白色按键 */
    #keyboard>section[class*="key"]>.white {
        width: 13.6vw;
    }
    /* 黑色白色按键：鼠标划过在手机上需要禁用 */
    #keyboard>section[class*="key"]>.black,
    #keyboard>section[class*="key"]>.black:hover {
        background-color: rgb(44, 44, 44);
        /* 复制一层按键的背景颜色，使手机上触屏按完按键不变色 */
    }
    #keyboard>section[class*="key"]>.white,
    #keyboard>section[class*="key"]>.white:hover {
        background-color: rgb(255, 255, 255);
        /* 复制一层按键的背景颜色，使手机上触屏按完按键不变色 */
    }
    #keyboard>section[class*="key"]>.black>.text {
        padding-top: 22.1vw;
    }
    #keyboard>section[class*="key"]>.white>.text {
        padding-top: 40.8vw;
    }
    #Ch5 {
        left: 8.5vw;
    }
    #Dh5 {
        left: 22.1vw;
    }
    #Fh5 {
        left: 49.3vw;
    }
    #Gh5 {
        left: 62.9vw;
    }
    #Ah5 {
        left: 76.5vw;
    }
    #keyboard>section[class*="key"]>.white>.text>span,
    #keyboard>section[class*="key"]>.black>.text>span {
        display: none;
    }
}