frontend/my-app/src/styles/base/base.css

/* base.css */

/* 背景渐变和字体 */
body {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  background: linear-gradient(135deg, #2c3e50, #4ca1af);
  color: white;
  min-height: 100vh;
  overflow-x: hidden;
}

/* 卡片样式 */
.upload-paper {
  position: relative;
  z-index: 20; /* 高于泡泡背景 */
  padding: 2rem;
  background-color: rgba(30, 30, 30, 0.9); /* 半透明深色背景 */
}

/* 标签样式 */
.upload-chip {
  background-color: #ffffff33;
  color: white;
}

/* 上传按钮 */
.upload-button {
  background-color: #00bcd4;
  color: white;
}

.upload-button:hover {
  background-color: #0097a7;
}

/* 提交按钮 */
.submit-button {
  border-color: white;
  color: white;
}

/* 标题样式 */
.upload-title {
  text-align: center;
  margin-bottom: 24px;
  font-weight: bold;
}

/* 动画背景容器 */
.bubbles {
  pointer-events: none;
  position: fixed; /* 确保浮在所有内容之下 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1; /* 保证不覆盖前景内容 */
}


.bubble {
  position: absolute;
  bottom: -100px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  animation: rise 20s infinite ease-in;
}

@keyframes rise {
  0% {
    transform: translateY(0) scale(1);
  }
  100% {
    transform: translateY(-120vh) scale(0.5);
  }
}