﻿.table td {
    white-space: nowrap;
}

/* 初始的音頻樣式 */
.audio-container audio {
    width: 100%;
    border: 2px solid #000;
}

/* 切換後的音頻樣式 */
.audio-container.toggled audio {
    border: 2px solid red;
    clip-path: polygon(0 0, 100% 100%, 0 100%);
}
/* 切換後的 CSS */
.floating-button img#videoImage {
    display: block;
    margin: auto;
    width: 45px;
    height: 45px;
}

.floating-button img#audioImage {
    display: none;
    margin: auto;
    width: 45px;
    height: 45px;
}

/* 按下後的 CSS */
.floating-button img#videoImage.clicked {
    display: none;
}

.floating-button img#audioImage.clicked {
    display: block;
}

.floating-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
}

    .floating-button a {
        display: block;
        width: 50px;
        height: 50px;
        background-color: #DDDDDD ;
        border-radius: 50%;
        text-align: center;
        line-height: 50px;
        color: #FFFFFF;
        text-decoration: none;
        font-size: 20px;
        transition: background-color 0.3s;
    }

        .floating-button a:hover {
            background-color: #3C342E;
        }
