@charset "UTF-8";

@font-face {
    font-family: 'font';
    src: url("../font/优设标题黑_猫啃网.ttf");
}

* {
    padding: 0;
    margin: 0;
    list-style: none;
    outline: none;
    text-decoration: none;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f7f7f7;
}

body .shell {
    width: 100%;
    position: relative;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}


body .shell-main-footer {
    width: 100%;
    position: relative;
    height: 100px;
    transform: translateY(100px);
    display: flex;
    justify-content: center;
    letter-spacing: 2px;
    align-items: center;
    text-align: center;
    font: 100 30px 'font';
    background-color: #a1e6ff;
}

/* 鼠标悬停时下划线效果 */
       .shell-main-nav ul li a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 3px;
            bottom: 0;
            left: 0;
            background-color: transparent;
            transition: width 0.3s ease;
        }

       .shell-main-nav ul li a:hover::after {
            width: 100%;
        }

        /* 修改选择文件夹按钮样式 */
       .custom-select-folder-button {
            display: inline-block;
            color: #007BFF;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            position: relative;
            margin-right: 10px;
            background-color: transparent;
            border: none; /* 去掉边框 */
            transition: transform 0.3s ease; /* 添加放大过渡效果 */
        }

       .custom-select-folder-button:hover {
            transform: scale(1.1); /* 鼠标悬停时放大按钮 */
        }

       .custom-select-folder-button::after {
            content: '';
            position: absolute;
            width: 0;
            height: 3px;
            bottom: 0;
            left: 0;
            background-color: #007BFF;
            transition: width 0.3s ease;
        }

       .custom-select-folder-button:hover::after {
            width: 100%;
        }

        /* 修改上传文件夹按钮样式 */
       .custom-upload-folder-button {
            display: inline-block;
            color: #6f42c1;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            position: relative;
            background-color: transparent;
            border: none; /* 去掉边框 */
            transition: transform 0.3s ease; /* 添加放大过渡效果 */
        }

       .custom-upload-folder-button:hover {
            transform: scale(1.1); /* 鼠标悬停时放大按钮 */
        }

       .custom-upload-folder-button::after {
            content: '';
            position: absolute;
            width: 0;
            height: 3px;
            bottom: 0;
            left: 0;
            background-color: #6f42c1;
            transition: width 0.3s ease;
        }

       .custom-upload-folder-button:hover::after {
            width: 100%;
        }

        /* 修改进度条样式 */
        #progressBar {
            display: none;
            width: 50%;
            background-color: #f3f3f3;
            border-radius: 5px;
            margin-top: 10px;
            transition: opacity 0.5s ease; /* 添加渐隐过渡效果 */
        }

        #progress {
            width: 0%;
            height: 20px;
            background-color: #007BFF;
            text-align: center;
            line-height: 20px;
            color: white;
            border-radius: 5px;
            position: relative;
        }

        /* 进度条箭头样式 */
        #progress::before,
        #progress::after {
            content: '→';
            position: absolute;
            color: purple;
            font-size: 20px;
            display: none;
        }

        #progress::before {
            left: 5px;
        }

        #progress::after {
            right: 5px;
        }

        /* 成功和错误消息样式 */
        #successMessage,
        #errorMessage {
            position: fixed;
            top: 60px;
            right: -300px;
            padding: 10px 20px;
            border-radius: 5px;
            color: white;
            transition: right 0.3s ease, opacity 0.3s ease;
            opacity: 0;
        }

        #successMessage {
            background-color: #28a745;
        }

        #errorMessage {
            background-color: #dc3545;
        }

        /* 将选择和上传按钮居中 */
       .button-container {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }

        /* 标题样式 */
       .upload-title {
            font-size: 36px;
            font-weight: bold;
            margin-bottom: 20px;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 1s ease forwards;
        }
       .avatar-pre-title {
            position: relative;
            font-size: 36px;
            font-weight: bold;
            top: 20px;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 1s ease forwards;
        }
        /* 按钮渐显动画 */
       .custom-select-folder-button,
       .custom-upload-folder-button {
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 1s ease 0.5s forwards;
        }

        /* 渐显动画 */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 左上角 < 符号样式 */
       .decorative-left {
            position: fixed;
            top: 5%;
            left: 5%;
            font-size: 150px;
            color: #007BFF;
            animation: rotateLeft 15s linear infinite;
        }

        /* 右下角 > 符号样式 */
       .decorative-right {
            position: fixed;
            bottom: 5%;
            right: 5%;
            font-size: 150px;
            color: #6f42c1;
            animation: rotateRight 12s linear infinite;
        }

        @keyframes rotateLeft {
            0% {
                transform: rotate(0deg);
            }
            25% {
                transform: rotate(-20deg);
            }
            50% {
                transform: rotate(20deg);
            }
            75% {
                transform: rotate(-20deg);
            }
            100% {
                transform: rotate(0deg);
            }
        }

        @keyframes rotateRight {
            0% {
                transform: rotate(0deg);
            }
            25% {
                transform: rotate(20deg);
            }
            50% {
                transform: rotate(-20deg);
            }
            75% {
                transform: rotate(20deg);
            }
            100% {
                transform: rotate(0deg);
            }
        }