src/assets/global.css
/* 引入 HyperOS 2 主题样式 */
@import './css/hyperos2-theme.css';

/* 恢复合理的动画和过渡效果 */
* {
  transition-duration: 0.2s;
  transition-timing-function: ease;
}

*::before,
*::after {
  transition-duration: 0.2s;
  transition-timing-function: ease;
}

/* 确保主题切换时瞬间完成，但其他动画正常 */
html.theme-switching,
html.theme-switching * {
  animation: none !important;
  transition: none !important;
}

/* 全局样式 */

/* 增强亮色主题基础变量 */
:root {
  /* 玻璃态效果变量 */
  --glass-bg: rgba(255, 255, 255, 0.8);
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  
  /* 渐变背景变量 */
  --gradient-primary: linear-gradient(135deg, rgb(59 130 246 / 0.1) 0%, rgb(168 85 247 / 0.1) 100%);
  --gradient-secondary: linear-gradient(135deg, rgb(59 130 246 / 0.05) 0%, rgb(6 182 212 / 0.05) 100%);
  --gradient-success: linear-gradient(135deg, rgb(16 185 129 / 0.1) 0%, rgb(34 197 94 / 0.05) 100%);
  
  /* 模糊效果 */
  --blur-light: 8px;
  --blur-medium: 12px;
  --blur-heavy: 16px;
  
  /* 阴影效果 */
  --shadow-soft: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-medium: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-large: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  
  /* 动画曲线 */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden; /* 防止html和body元素出现滚动条 */

  /* 字体渲染优化 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

#app {
  height: 100%;
  overflow: hidden; /* 防止根应用容器出现滚动条 */
  display: flex;
  flex-direction: column; /* 修改回column布局，让内部组件决定自己的布局 */
}

/* 统一内容区域宽度控制 - 使用CSS变量 */
.content-area {
  overflow-x: hidden;
  box-sizing: border-box;
  transition: margin-left 0.15s ease, width 0.15s ease;
  margin-left: var(--sidebar-width, 64px); /* 使用CSS变量 */
  width: var(--content-width, calc(100% - 64px));
}

/* 侧边栏展开时的内容区域样式 */
.content-area.sidebar-expanded {
  margin-left: var(--sidebar-width, 220px); /* 使用CSS变量 */
  width: var(--content-width, calc(100% - 220px));
}

/* 所有内容容器继承内容区域的宽度设置 */
.home-content,
.instances-tab,
.downloads-tab,
.logs-tab,
.settings-tab {
  width: 100%;
  box-sizing: border-box;
}

/* 确保所有标签页内容都有正确的边距 - 提高选择器优先级 */
.content-area .logs-tab,
.content-area .instances-tab,
.content-area .downloads-tab,
.content-area .settings-tab,
.content-area .plugins-tab,
.content-area .tab-content {
  padding: 20px;
  box-sizing: border-box;
  margin-left: 15px; /* 添加左边距，避免内容直接贴着侧边栏 */
  width: calc(100% - 15px); /* 减去左边距的宽度 */
}

/* 专门为instances-tab提供无间隙布局 */
.content-area .instances-tab {
  margin-left: 0;
  width: 100%;
  padding: 0 0 1.5rem 0;
}

/* 全局的响应式断点处理 - 更新为使用CSS变量 */
@media (max-width: 1200px) {
  .content-area {
    margin-left: var(--sidebar-width, 64px);
    width: var(--content-width, calc(100% - 64px));
  }
}

@media (max-width: 768px) {
  .content-area {
    margin-left: var(--sidebar-width, 64px);
    width: var(--content-width, calc(100% - 64px));
  }

  .content-area .logs-tab,
  .content-area .instances-tab,
  .content-area .downloads-tab,
  .content-area .settings-tab,
  .content-area .plugins-tab,
  .content-area .tab-content {
    margin-left: 0;
    width: 100%;
  }

  /* 小屏幕上强制折叠侧边栏 */
  .side-nav {
    width: 64px !important;
  }

  .side-nav .nav-text {
    display: none !important;
  }
}

/* 滚动条样式 - 使用DaisyUI主题变量 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: hsl(var(--b2));
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: hsl(var(--b3));
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--bc) / 0.3);
}

/* 全局变量 - 使用DaisyUI颜色变量替代Element Plus */
:root {
  /* 主色调 */
  --primary-color: hsl(var(--p));
  --primary-light: hsl(var(--p) / 0.8);
  --primary-dark: hsl(var(--p) / 1.2);

  /* 辅助色 */
  --accent-color: hsl(var(--a));
  --accent-secondary: hsl(var(--s));
  --accent-tertiary: hsl(var(--s) / 0.8);

  /* 背景和卡片 */
  --app-bg-color: hsl(var(--b2));
  --card-bg-color: hsl(var(--b1));
  --card-bg-secondary: hsl(var(--b2));
  --card-hover: hsl(var(--b3));

  /* 文本颜色 */
  --text-color: hsl(var(--bc));
  --secondary-text-color: hsl(var(--bc) / 0.8);
  --tertiary-text-color: hsl(var(--bc) / 0.6);
  --text-light: hsl(var(--bc) / 0.4);
}

/* 暗色模式下文本颜色变量覆盖 */
[data-theme="dark"] {
  --text-color: #ffffff;
  --secondary-text-color: rgba(255, 255, 255, 0.8);
  --tertiary-text-color: rgba(255, 255, 255, 0.6);
  --text-light: rgba(255, 255, 255, 0.4);
  --sidebar-text-color: rgba(255, 255, 255, 0.8);
  --sidebar-text-hover-color: rgba(255, 255, 255, 1);

  /* 边框和分隔线 */
  --border-color: hsl(var(--b3));
  --border-light: hsl(var(--b2) / 0.7);
  --divider-color: hsl(var(--b2));

  /* 状态颜色 */
  --success-color: hsl(var(--su));
  --warning-color: hsl(var(--wa));
  --danger-color: hsl(var(--er));
  --info-color: hsl(var(--in));

  /* 交互色 */
  --hover-color: hsl(var(--p) / 0.1);
  --active-color: hsl(var(--p) / 0.2);

  /* 特殊用途 */
  --terminal-bg: hsl(var(--n));
  --terminal-text: hsl(var(--nc));

  /* 图表相关变量 */
  --chart-text: hsl(var(--bc));
  --chart-line: hsl(var(--p));
  --chart-memory: hsl(var(--su));
  --chart-network: hsl(var(--wa));
  --chart-secondary: hsl(var(--s));
  --chart-tertiary: hsl(var(--a));

  /* 侧边栏半透明效果相关变量 */
  --sidebar-bg-opacity: 0.95;
  --sidebar-backdrop-filter: blur(10px);
  --sidebar-bg: hsl(var(--b1) / var(--sidebar-bg-opacity));
  --sidebar-border-color: hsl(var(--b3) / 0.1);
  --sidebar-shadow: 0 0 15px hsla(var(--b2), 0.05);
  --sidebar-text-color: hsl(var(--bc));
  --sidebar-text-hover-color: hsl(var(--bc));
}

/* 添加Iconify图标支持 */
.iconify {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: -0.125em;
}

/* 禁用动画 */
html.no-animations *,
html.no-animations *::before,
html.no-animations *::after {
  transition: none !important;
  animation: none !important;
}

/* 确保echarts实例能够正确渲染 */
.echarts-container {
  width: 100%;
  height: 100%;
  min-height: 200px;
}

/* Iconify图标尺寸变体 */
.icon-xs {
  font-size: 0.75rem;
}

.icon-sm {
  font-size: 0.875rem;
}

.icon-md {
  font-size: 1.125rem;
}

.icon-lg {
  font-size: 1.5rem;
}

.icon-xl {
  font-size: 2rem;
}

/* 禁用DaisyUI主题过渡 - 瞬间切换 */
[data-theme] {
  transition: none !important;
}

/* 主题切换时的即时模式 - 禁用过渡 */
[data-theme].theme-switching {
  transition: none !important;
}

[data-theme].theme-switching * {
  transition: none !important;
}

/* 确保按钮内图标对齐 */
.btn .iconify {
  vertical-align: middle;
  margin-right: 0.25rem;
}

.btn-square .iconify,
.btn-circle .iconify {
  margin-right: 0;
}

/* 深色模式下的变量 */
html.dark-mode {
  /* 侧边栏半透明效果相关变量 - 深色模式专用 */
  --sidebar-bg-opacity: 0.65;
  --sidebar-bg-color: 18, 18, 18;
  --sidebar-backdrop-filter: blur(12px);
  --sidebar-bg: rgba(22, 25, 30, var(--sidebar-bg-opacity));
  --sidebar-border-color: rgba(255, 255, 255, 0.05);
  --sidebar-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  --sidebar-text-color: rgba(255, 255, 255, 0.8);
  --sidebar-text-hover-color: rgba(255, 255, 255, 1);
  --sidebar-active-bg: rgba(255, 255, 255, 0.1);
  --sidebar-hover-bg: rgba(255, 255, 255, 0.05);

  /* 图表深色模式相关变量 */
  --chart-bg-color: rgba(40, 44, 52, 0.8);
  --chart-text-color: #eee;
  --chart-grid-color: #333;
  --chart-axis-color: #444;

  /* 确保深色模式下文字颜色正确 */
  --text-color: hsl(var(--bc));
  --secondary-text-color: hsl(var(--bc) / 0.8);
  --tertiary-text-color: hsl(var(--bc) / 0.6);
}


/* 设置页面样式 */
.settings-page {
  padding: 2rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.settings-container {
  text-align: center;
  max-width: 500px;
  padding: 3rem;
  background: hsl(var(--b2) / 0.5);
  border-radius: 1rem;
  border: 1px solid hsl(var(--b3) / 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.settings-container h2 {
  color: hsl(var(--bc));
  margin-bottom: 1rem;
}

.settings-container p {
  color: hsl(var(--bc) / 0.7);
  font-size: 1rem;
}
