yf-portal-vue/src/assets/style/main.css

@import "tailwindcss";


/* 默认浅色主题 (Light) */
:root {
  --bg-primary: #e8f1f8;
  --bg-secondary: #f5f7fa;
  --bg-card: #ffffff;
  --item-border-color:solid 1.5px #ccc2fc;
  --bg-card-2: 
    radial-gradient(
      circle at 18% 12%,
      rgba(83, 126, 255, 0.14),
      transparent 22%
    ),
    radial-gradient(
      circle at 82% 20%,
      rgba(71, 148, 255, 0.14),
      transparent 20%
    ),
    radial-gradient(
      circle at 50% 100%,
      rgba(97, 142, 247, 0.12),
      transparent 28%
    ),
    linear-gradient(180deg, #eef3f9 0%, #f7faff 46%, #eef3f9 100%);
  --bg-total-card: transparent;
  --bg-table:#f5f7fa;
  --bg-table-head:#e9f7ff;
  --bg-tab:#e4e7ed;
  --bg-tab2:#fff;
  --bg-flow-card:#fafafe;
  --portal-input-bg: #ccc2fc;
  --color-skeleton: #cfd2f4;
   --dropdown-menu:#fff;
    --dropdown-menu-hover:#f5f7fa;
  --bg-flow-tab: transparent;
  --bg-flow-item: #5e98f8;
  --bg-drive-tab: none !important;
  --tab-drive-text: #3170f4;
  --drive-bottom-color: #1159e9;
  --tab-text: #303133;
  --text-primary: #303133;
  --text-primary-down: #dcdfe6;
  --text-secondary: #606266;
  --text-tertiary: #909399;
  --border-color: #dcdfe6;
  
  
  
  /* 品牌色 */
  --primary-color: #02409b;
  --primary-hover: #02307a;
  --primary-soft: rgba(2, 64, 155, 0.1);
  
  /* 特定组件背景 (根据您的代码适配) */
  --header-bg: #ffffff;
  --header-border: #e4e7ed;
  --item-card-bg: #ffffff;
  --item-card-border: #e4e7ed;
  --item-icon-bg: linear-gradient(135deg, rgba(2, 64, 155, 0.1) 0%, rgba(2, 64, 155, 0.02) 100%);
}

/* 深色主题 (Dark) */
[data-theme='dark'] {
  --bg-primary: #0b0f2e; /* 对应您代码中的 rgb(11, 15, 46) */
  --bg-secondary: #131928;
  --bg-card: #131928;
  --portal-input-bg: #6458f1;
  --drive-bottom-color: transparent;
  --item-border-color:none;
  --bg-card-2: #131928;
   --bg-total-card: rgba(
    5,
    15,
    46,
    0.92
  );
  --bg-flow-card:conic-gradient(
    transparent,
    #02409b,
    #00d2ff,
    #7c3aed,
    #db2777,
    transparent 100%
  );
  --bg-flow-tab: linear-gradient(
    360deg,
    #003be0 0%,
    rgba(10, 65, 227, 0.6) 10%,
    #001c71 40%,
    #000c33 80%
  ) !important;
  --bg-flow-item: linear-gradient(
    to right,
    #5887f8 0%,
    #69b5f8 30%,
    #fff 50%,
    #69b5f8 70%,
    #5887f8 100%
  );
  --bg-drive-tab:linear-gradient(
    360deg,
    #003be0 0%,
    rgba(10, 65, 227, 0.6) 10%,
    #001c71 40%,
    #000c33 80%
  ) !important;
  --tab-drive-text: #fff;
  --bg-table:#091126;
  --bg-table-head:#091126;
  --color-skeleton:#0a193d;
  --dropdown-menu:#0a193d;
   --dropdown-menu-hover:#182342;
  --bg-tab:#070e24;
  --bg-tab2:#070e24;
  --tab-text: rgba(220, 229, 255, 0.78);
  --text-primary: #eaf1ff;
  --text-primary-down: #303133;
  --text-secondary: #c7ced9;
  --text-tertiary: #869ac2;
  --border-color: #262360;
  
  /* 品牌色 (深色模式下可能需要稍微亮一点，或者保持一致) */
  --primary-color: #4285f4; 
  --primary-hover: #66a3ff;
  --primary-soft: rgba(66, 133, 244, 0.15);
  
  /* 特定组件背景 */
  --header-bg: #010612; /* 对应 header.vue 中的 bg-[#010612] */
  --header-border: #131928;
  --item-card-bg: rgb(11, 15, 46);
  --item-card-border: #262360;
  --item-icon-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 100%);
}


@layer base {
  html,
  body,
  #app {
    min-height: 100%;
    background-color: #000613;
    overflow-x: hidden;
  }

  body {
    background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s, color 0.3s;
    margin: 0;
  }
}

/* 修改垂直滚动条 */
::-webkit-scrollbar {
  width: 7px; /* 修改宽度 */
  height: 5px;
  display: none;
}
::-webkit-scrollbar-thumb {
  border-radius: 8px;
}

/* 修改滚动条轨道背景色 */
::-webkit-scrollbar-track {
  background-color: var(--bg-primary);
}

/* 修改滚动条滑块颜色 */
::-webkit-scrollbar-thumb {
  background-color: #8b8b8b;
}

/* 修改滚动条滑块悬停时的颜色 */
::-webkit-scrollbar-thumb:hover {
  background-color: #69696b;
}