pendulum/web/src/assets/styles/global.scss

:root {
  // 定义颜色变量
  --c-brand: #0070D5;
  --c-brand-light: #4098fc;
  --c-text: #213547;
  --c-text-light: #476582;
  --c-text-lighter: #8a8f98;
  --c-text-lightest: #a8adb7;
  --c-divider: #e2e2e3;
  --c-bg: #ffffff;
  --c-bg-light: #f3f4f5;
  --c-bg-lighter: #eeeeee;
  --c-bg-navbar: var(--c-bg);
  --c-bg-sidebar: var(--c-bg);
  --c-bg-float: var(--c-bg);
}

// 基础样式重置
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  color: var(--c-text);
  background-color: var(--c-bg);
  line-height: 1.5;
}

a {
  text-decoration: none;
  color: var(--c-brand);
  transition: color 0.2s;
}

a:hover {
  color: var(--c-brand-light);
}

// 布局样式
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

// 工具类
.text-center {
  text-align: center;
}

// 布局样式
.app-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
}

// Section样式
.section {
  padding: var(--spacing-xl) 0;

  &-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
  }
}

// 响应式调整
@media (max-width: 768px) {
  .section {
    padding: var(--spacing-lg) 0;
  }
}