yss-project/src/styles.scss

// Include theming for Angular Material
@use '@angular/material' as mat;

// 导入变量
@use './styles/variables' as *;

// 导入移动端响应式样式
@import './styles/mobile-responsive.scss';

// 自定义字体配置
@include mat.core();

// 定义调色板
$primary-palette: mat.define-palette(mat.$indigo-palette);
$accent-palette: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$warn-palette: mat.define-palette(mat.$red-palette);

// 创建主题
$theme: mat.define-light-theme((
  color: (
    primary: $primary-palette,
    accent: $accent-palette,
    warn: $warn-palette,
  )
));

// 应用主题
@include mat.all-component-themes($theme);

body {
  // Default the application to a light color theme. This can be changed to
  // `dark` to enable the dark color theme, or to `light dark` to defer to the
  // user's system settings.
  color-scheme: light;

  // Set a default background, font and text colors for the application using
  // Angular Material's system-level CSS variables. Learn more about these
  // variables at https://material.angular.dev/guide/system-variables
  background-color: var(--mat-sys-surface);
  color: var(--mat-sys-on-surface);
  font: var(--mat-sys-body-medium);

  // Reset the user agent margin.
  margin: 0;
  
  // 使用系统字体栈替代Google Fonts
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
/* 使用系统字体栈替代Google Fonts，避免网络请求错误 */

/* You can add global styles to this file, and also import other style files */

/* 🔧 强制全局滚动修复 */
html {
  height: 100%;
  overflow-y: scroll !important; /* 强制显示垂直滚动条 */
  overflow-x: hidden;
}

body { 
  min-height: 100vh;
  height: auto !important; /* 允许内容撑开 */
  margin: 0; 
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  overflow-y: visible !important; /* 允许垂直滚动 */
  overflow-x: hidden;
  position: relative;
}


/* 上传成功弹窗全局样式 - 确保居中显示 */
app-upload-success-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 99998 !important;
  pointer-events: none !important;
  display: block !important;
}

/* HR Dialog Global Styles - 重新设计解决背景色重合问题 */
.hr-dialog-backdrop {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.hr-dialog {
  .mat-mdc-dialog-container .mdc-dialog__surface {
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    border: 1px solid #e2e8f0;
    animation: slideIn 0.3s ease;
  }

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

  .mat-mdc-dialog-title {
    margin: 0;
    padding: 24px 32px;
    color: #ffffff;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    font-size: 22px;
    font-weight: 600;
    border-bottom: 1px solid #e2e8f0;
  }

  .mat-mdc-dialog-content {
    padding: 24px 32px;
    background: #ffffff;
    max-height: 70vh;
    overflow-y: auto;
  }

  .mat-mdc-dialog-actions {
    padding: 16px 32px 24px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    display: flex;
    justify-content: flex-end;
    gap: 16px;
  }

  // 表单样式优化
  .employee-form {
    .form-row {
      display: flex;
      gap: 16px;
      margin-bottom: 16px;
      
      mat-form-field {
        flex: 1;
      }
    }

    mat-form-field {
      .mat-mdc-form-field-subscript-wrapper {
        margin-top: 4px;
      }
    }
  }

  // 按钮样式优化
  .mat-mdc-raised-button {
    border-radius: 8px;
    padding: 8px 24px;
    font-weight: 500;
    transition: all 0.3s ease;

    &.mat-primary {
      background: #667eea;
      color: white;
      
      &:hover {
        background: #5a6fd8;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
      }
    }

    &:not(.mat-primary) {
      background: #f1f5f9;
      color: #64748b;
      
      &:hover {
        background: #e2e8f0;
      }
    }
  }
}