contentCooper/src/views/publishContent/videos/components/uploadVideoModal/index.module.css

.upload-video-modal {
  padding: 20px 0;
}

.upload-section {
  margin-bottom: 24px;
  padding: 20px;
  background: #fafafa;
  border-radius: 8px;
  border: 1px dashed #d9d9d9;
}

.file-info {
  margin-top: 12px;
  padding: 12px;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #e8e8e8;
}

.file-info p {
  margin: 4px 0;
  color: #666;
  font-size: 14px;
}

.upload-progress-section {
  margin-bottom: 24px;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e8e8e8;
}

.progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.file-name {
  font-weight: 500;
  color: #333;
  font-size: 14px;
}

.upload-speed {
  color: #1890ff;
  font-size: 12px;
  font-weight: 500;
}

.progress-text {
  margin-top: 8px;
  text-align: center;
  color: #666;
  font-size: 12px;
}

.video-info-section {
  margin-bottom: 24px;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e8e8e8;
}

.action-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e8e8e8;
}

.left-actions {
  flex: 1;
}

.right-actions {
  flex: 1;
  text-align: right;
}

/* 上传按钮样式 */
.upload-section .ant-upload {
  width: 100%;
}

.upload-section .ant-upload .ant-btn {
  width: 100%;
  height: 48px;
  border: 1px dashed #d9d9d9;
  background: #fff;
  color: #666;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.upload-section .ant-upload .ant-btn:hover {
  border-color: #1890ff;
  color: #1890ff;
}

/* 进度条样式 */
.upload-progress-section .ant-progress {
  margin: 12px 0;
}

.upload-progress-section .ant-progress-bg {
  background: linear-gradient(90deg, #ff4383 0%, #ff6b9d 100%);
}

/* 更多设置按钮样式 */
.more-btn {
  display: inline-flex;
  align-items: center;
  color: #acacac;
  font-size: 14px;
  cursor: pointer;
  transition: color 0.3s;
}

.more-btn:hover {
  color: #1890ff;
}

.more-btn .anticon {
  margin-right: 4px;
}

/* 发布按钮样式 */
.publish-btn {
  width: 104px;
  height: 42px;
  background: rgba(17, 17, 17, 0.01);
  border: 1px solid rgba(236, 92, 142, 0.3);
  border-radius: 6px;
  color: #ec5c8e;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 14px;
}

.publish-btn:hover {
  background: rgba(236, 92, 142, 0.1);
  border-color: rgba(236, 92, 142, 0.5);
}

.publish-btn.disable {
  background: rgba(17, 17, 17, 0.01) !important;
  opacity: 0.5 !important;
  cursor: not-allowed;
}

/* 重试按钮样式 */
.retry-btn {
  color: #fff;
  background-color: #f2584f;
  border-color: #f2584f;
}

.retry-btn:hover {
  background-color: rgba(242, 88, 79, 0.8);
  border-color: rgba(242, 88, 79, 0.8);
}

/* 表单样式 */
.video-info-section .ant-form-item {
  margin-bottom: 16px;
}

.video-info-section .ant-form-item-label > label {
  color: #333;
  font-weight: 500;
}

.video-info-section .ant-input,
.video-info-section .ant-select-selector,
.video-info-section .ant-input-number {
  border-radius: 6px;
}

.video-info-section .ant-input:focus,
.video-info-section .ant-input-focused {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .action-section {
    flex-direction: column;
    gap: 12px;
  }
  
  .left-actions,
  .right-actions {
    width: 100%;
    text-align: center;
  }
  
  .upload-section,
  .upload-progress-section,
  .video-info-section,
  .action-section {
    margin: 0 0 16px 0;
    padding: 16px;
  }
}

/* 动画效果 */
.upload-progress-section {
  animation: fadeInUp 0.3s ease-out;
}

.video-info-section {
  animation: fadeInUp 0.3s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 状态指示器 */
.status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 12px;
}

.status-indicator.uploading {
  color: #1890ff;
  background: rgba(24, 144, 255, 0.1);
}

.status-indicator.uploaded {
  color: #52c41a;
  background: rgba(82, 196, 26, 0.1);
}

.status-indicator.error {
  color: #f2584f;
  background: rgba(242, 88, 79, 0.1);
}

.status-indicator.waiting {
  color: #faad14;
  background: rgba(250, 173, 20, 0.1);
}