InfoGenie/frontend/60sapi/实用功能/随机颜色/background.css

/* 背景样式文件 - 独立管理背景相关样式 */

/* 主体背景 */
body {
    background: linear-gradient(135deg, #e8f5e8 0%, #f0fff0 50%, #e8f5e8 100%);
    background-attachment: fixed;
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
}

/* 背景动画 */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* 容器背景装饰 */
.container::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(144, 205, 144, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(45, 90, 39, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(144, 205, 144, 0.08) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
}

/* 输入区域背景 */
.input-section {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* 结果区域背景 */
.result-section {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* 格式组背景 */
.format-group {
    background: rgba(248, 255, 248, 0.8);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* 属性项背景 */
.property-item {
    background: rgba(248, 255, 248, 0.8);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* 调色板项背景 */
.palette-item {
    background: rgba(248, 255, 248, 0.8);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* 无障碍项背景 */
.accessibility-item {
    background: rgba(248, 255, 248, 0.8);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* 颜色预览背景 */
.color-preview {
    background: rgba(248, 255, 248, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* 输入框背景 */
.input-group input,
.input-group select {
    background: rgba(248, 255, 248, 0.9);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.input-group input:focus,
.input-group select:focus {
    background: rgba(255, 255, 255, 0.95);
}

/* 格式组内部元素背景 */
.format-group p {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* 手机端背景优化 */
@media (max-width: 767px) {
    body {
        background: linear-gradient(180deg, #e8f5e8 0%, #f0fff0 50%, #e8f5e8 100%);
        background-attachment: scroll; /* 手机端使用scroll避免性能问题 */
    }
    
    .container::before {
        background-image: 
            radial-gradient(circle at 30% 70%, rgba(144, 205, 144, 0.08) 0%, transparent 40%),
            radial-gradient(circle at 70% 30%, rgba(45, 90, 39, 0.04) 0%, transparent 40%);
    }
    
    /* 减少手机端的模糊效果以提升性能 */
    .input-section,
    .result-section {
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }
    
    .format-group,
    .property-item,
    .palette-item,
    .accessibility-item {
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }
}

/* 平板端背景优化 */
@media (min-width: 768px) and (max-width: 1024px) {
    .container::before {
        background-image: 
            radial-gradient(circle at 25% 75%, rgba(144, 205, 144, 0.12) 0%, transparent 60%),
            radial-gradient(circle at 75% 25%, rgba(45, 90, 39, 0.06) 0%, transparent 60%),
            radial-gradient(circle at 50% 50%, rgba(144, 205, 144, 0.04) 0%, transparent 40%);
    }
}

/* 电脑端背景优化 */
@media (min-width: 1025px) {
    body {
        background-size: 300% 300%;
        animation-duration: 20s;
    }
    
    .container::before {
        background-image: 
            radial-gradient(circle at 15% 85%, rgba(144, 205, 144, 0.15) 0%, transparent 70%),
            radial-gradient(circle at 85% 15%, rgba(45, 90, 39, 0.08) 0%, transparent 70%),
            radial-gradient(circle at 35% 35%, rgba(144, 205, 144, 0.1) 0%, transparent 50%),
            radial-gradient(circle at 65% 65%, rgba(45, 90, 39, 0.05) 0%, transparent 50%);
    }
    
    /* 电脑端增强模糊效果 */
    .input-section,
    .result-section {
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
    }
    
    .format-group,
    .property-item,
    .palette-item,
    .accessibility-item {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
}

/* 深色模式支持（如果用户系统设置为深色模式） */
@media (prefers-color-scheme: dark) {
    body {
        background: linear-gradient(135deg, #1a2e1a 0%, #0f1f0f 50%, #1a2e1a 100%);
    }
    
    .container::before {
        background-image: 
            radial-gradient(circle at 20% 80%, rgba(144, 205, 144, 0.05) 0%, transparent 50%),
            radial-gradient(circle at 80% 20%, rgba(45, 90, 39, 0.03) 0%, transparent 50%);
    }
    
    .input-section,
    .result-section {
        background: rgba(26, 46, 26, 0.9);
    }
    
    .format-group,
    .property-item,
    .palette-item,
    .accessibility-item,
    .color-preview {
        background: rgba(26, 46, 26, 0.6);
    }
    
    .input-group input,
    .input-group select {
        background: rgba(26, 46, 26, 0.8);
        color: #e8f5e8;
        border-color: rgba(144, 205, 144, 0.3);
    }
    
    .format-group p {
        background: rgba(15, 31, 15, 0.8);
        color: #e8f5e8;
    }
}