sundynix-radio-mp/app.wxss

/* ============================================
   早安电台 — 全局样式
   品牌主色: #FF9D42  背景: #F6F6F6
   ============================================ */

/* TDesign 主题变量覆盖 */
page {
  /* 品牌色 */
  --td-brand-color: #FF9D42;
  --td-brand-color-light: rgba(255, 157, 66, 0.1);
  --td-brand-color-focus: rgba(255, 157, 66, 0.2);
  --td-brand-color-active: #E88A35;
  --td-brand-color-disabled: rgba(255, 157, 66, 0.4);

  /* 成功色（森林绿） */
  --td-success-color: #2D5A27;
  --td-success-color-light: rgba(45, 90, 39, 0.1);

  /* 警告色 */
  --td-warning-color: #E34D59;

  /* 圆角 */
  --td-radius-default: 16rpx;
  --td-radius-large: 32rpx;
  --td-radius-extra-large: 40rpx;
  --td-radius-round: 999rpx;

  /* 自定义品牌变量 */
  --color-primary: #FF9D42;
  --color-primary-light: rgba(255, 157, 66, 0.08);
  --color-primary-bg: rgba(255, 157, 66, 0.12);
  --color-success: #2D5A27;
  --color-warning: #E34D59;
  --color-bg-page: #F6F6F6;
  --color-bg-card: #FFFFFF;
  --color-bg-container: #FEFEFE;
  --color-text-primary: #333333;
  --color-text-secondary: #666666;
  --color-text-placeholder: #999999;
  --color-text-disabled: #CCCCCC;
  --color-border: #EEEEEE;
  --color-border-light: #F5F5F5;

  /* 页面背景 */
  background-color: var(--color-bg-page);
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
               'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 28rpx;
  color: var(--color-text-primary);
  line-height: 1.6;
  box-sizing: border-box;
}

/* ========== 通用工具类 ========== */

/* Flex */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-row { display: flex; flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-end { justify-content: flex-end; }
.self-center { align-self: center; }

/* 间距 */
.gap-sm { gap: 16rpx; }
.gap-md { gap: 24rpx; }
.gap-lg { gap: 32rpx; }

/* 文字 */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-bold { font-weight: 700; }
.text-medium { font-weight: 500; }
.text-xs { font-size: 20rpx; }
.text-sm { font-size: 24rpx; }
.text-base { font-size: 28rpx; }
.text-lg { font-size: 32rpx; }
.text-xl { font-size: 36rpx; }
.text-2xl { font-size: 44rpx; }
.text-3xl { font-size: 56rpx; }
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-placeholder { color: var(--color-text-placeholder); }
.text-white { color: #FFFFFF; }

/* 单行省略 */
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 多行省略 */
.line-clamp-1 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.line-clamp-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ========== 卡片 ========== */
.card {
  background: var(--color-bg-card);
  border-radius: var(--td-radius-extra-large);
  padding: 32rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.03);
  border: 1rpx solid var(--color-border-light);
}

/* ========== 按钮 ========== */
.btn-primary {
  background: var(--color-primary);
  color: #FFFFFF;
  border: none;
  border-radius: var(--td-radius-round);
  padding: 20rpx 48rpx;
  font-size: 28rpx;
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
}
.btn-primary::after { border: none; }

.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border: 2rpx solid var(--color-primary);
  border-radius: var(--td-radius-round);
  padding: 20rpx 48rpx;
  font-size: 28rpx;
  font-weight: 600;
  text-align: center;
}

.btn-ghost {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border: none;
  border-radius: var(--td-radius-round);
  padding: 16rpx 32rpx;
  font-size: 24rpx;
  font-weight: 600;
}
.btn-ghost::after { border: none; }

/* 按钮点击反馈 */
.btn-primary:active,
.btn-outline:active,
.btn-ghost:active,
.tap-active:active {
  opacity: 0.85;
  transform: scale(0.97);
}

/* ========== 安全区 ========== */
.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}
.safe-area-top {
  padding-top: env(safe-area-inset-top);
}

/* ========== 全局隐藏滚动条 ========== */
page {
  -webkit-overflow-scrolling: touch;
  overflow: auto;
}

/* 隐藏所有 webkit 滚动条 */
::-webkit-scrollbar {
  display: none;
  width: 0 !important;
  height: 0 !important;
  color: transparent;
  background: transparent;
}

/* 通用滚动容器滚动条隐藏 */
page,
view,
scroll-view {
  scrollbar-width: none;           /* Firefox */
  -ms-overflow-style: none;        /* IE / Edge */
}

page::-webkit-scrollbar,
view::-webkit-scrollbar,
scroll-view::-webkit-scrollbar {
  display: none;
  width: 0 !important;
  height: 0 !important;
}

/* ========== 动画 ========== */
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20rpx); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
@keyframes bounce {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}

.anim-rotate {
  animation: rotate 10s linear infinite;
}
.anim-rotate-paused {
  animation-play-state: paused;
}
.anim-fade-in {
  animation: fadeIn 0.5s ease-out forwards;
}
.anim-pulse {
  animation: pulse 1.5s ease-in-out infinite;
}