NewSzxcn-Email/apps/web/src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 9%;
    --primary: 0 0% 12%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 12%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 42%;
    --accent: 0 0% 95%;
    --accent-foreground: 0 0% 12%;
    --destructive: 358 88% 61%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 82%;
    --ring: 0 0% 32%;
    --radius: 0.5rem;
    --app-sidebar-width: 18rem;
    --sidebar-background: 0 0% 100%;
    --sidebar-foreground: 0 0% 16%;
    --sidebar-primary: 0 0% 12%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 0 0% 95%;
    --sidebar-accent-foreground: 0 0% 12%;
    --sidebar-border: 0 0% 89.8%;
    --sidebar-ring: 0 0% 42%;
  }

  * { @apply border-border; }
  html {
    color-scheme: light;
    font-size: 16px;
  }
  body {
    @apply bg-background text-foreground antialiased;
    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
  }
  html, body, #root {
    min-height: 100%;
    min-width: 0;
    width: 100%;
  }
  html.dark { color-scheme: dark; }

  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 0 0% 98%;
    --sidebar-primary-foreground: 240 5.9% 10%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer components {
  .mail-shell-grid {
    display: grid;
    grid-template-columns: var(--app-sidebar-width, 18rem) minmax(0, 1fr);
  }

  .mail-content-grid {
    display: grid;
    grid-template-columns: 384px minmax(0, 1fr);
  }

  .mail-list-pane,
  .mail-detail-pane {
    min-height: 0;
    height: 100%;
  }

  .mail-list-pane {
    border-right: 1px solid hsl(var(--border));
    width: 384px;
    max-width: 384px;
  }

  @media (max-width: 767px) {
    .mail-content-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .mail-list-pane {
      border-right: 0;
      width: auto;
      max-width: none;
    }
  }

  [data-sidebar="content"] {
    gap: 0.75rem;
  }

  [data-sidebar="group"] {
    padding: 0 0.25rem;
  }

  [data-sidebar="menu"] {
    gap: 0.25rem;
  }

  [data-sidebar="menu-button"] {
    color: hsl(var(--sidebar-foreground));
  }

  [data-sidebar="menu-button"] svg {
    color: hsl(var(--muted-foreground));
    stroke-width: 1.8;
  }

  [data-sidebar="menu-button"][data-active="true"] {
    background: hsl(var(--sidebar-accent) / 0.82);
    color: hsl(var(--sidebar-accent-foreground));
    box-shadow: inset 2px 0 0 hsl(var(--foreground));
  }

  [data-sidebar="menu-button"][data-active="true"] svg {
    color: hsl(var(--foreground));
  }

  .admin-page [data-slot="card"] {
    border-radius: 0.5rem;
    box-shadow: none;
  }

  .admin-page [data-slot="card-header"] {
    padding: 1.25rem;
  }

  .admin-page [data-slot="card-content"] {
    padding: 0 1.25rem 1.25rem;
  }

  .admin-page [data-slot="card-title"] {
    font-size: 0.9375rem;
    line-height: 1.4;
  }

  .admin-page [data-slot="table-header"] {
    background: hsl(var(--muted) / 0.48);
  }

  .admin-page [data-slot="table-head"] {
    height: 2.5rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    font-size: 0.75rem;
  }

  .admin-page [data-slot="table-cell"] {
    padding: 0.75rem;
  }

  .admin-page [data-slot="table-row"]:hover {
    background: hsl(var(--muted) / 0.32);
  }
}

html.theme-transition body {
  transition: background-color 180ms ease, color 180ms ease;
}

html.theme-transition::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  pointer-events: none;
  background: var(--theme-fade-bg, hsl(var(--background)));
  animation: theme-fade-out 180ms ease-out both;
  will-change: opacity;
}

@keyframes theme-fade-out {
  from { opacity: 0.28; }
  to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html.theme-transition body {
    transition-duration: 0ms !important;
  }

  html.theme-transition::before {
    animation-duration: 0ms !important;
  }
}

/* ===== 邮件 HTML 内容渲染 ===== */
.mail-html {
  line-height: 1.75;
  color: hsl(var(--foreground));
}
.mail-html a { color: hsl(var(--primary)); text-decoration: underline; }
.mail-html a:hover { opacity: 0.85; }
.mail-html blockquote {
  border-left: 3px solid hsl(var(--border));
  padding-left: 1rem;
  color: hsl(var(--muted-foreground));
  margin: 1rem 0;
}
.mail-html table { border-collapse: collapse; max-width: 100%; width: 100%; }
.mail-html td, .mail-html th {
  border: 1px solid hsl(var(--border));
  padding: 0.5rem 0.75rem;
  text-align: left;
}
.mail-html th { background-color: hsl(var(--muted)); font-weight: 600; }
.mail-html img { max-width: 100%; height: auto; border-radius: 0.5rem; }
.mail-html p { margin: 0.75rem 0; }
.mail-html ul, .mail-html ol { padding-left: 1.5rem; margin: 0.75rem 0; }
.mail-html h1, .mail-html h2, .mail-html h3, .mail-html h4 { margin: 1.25rem 0 0.5rem; font-weight: 600; }
.mail-html h1 { font-size: 1.5rem; }
.mail-html h2 { font-size: 1.25rem; }
.mail-html h3 { font-size: 1.125rem; }
.mail-html pre {
  background-color: hsl(var(--muted));
  border-radius: 0.5rem;
  padding: 1rem;
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.5;
}
.mail-html hr { border: none; border-top: 1px solid hsl(var(--border)); margin: 1.5rem 0; }

/* ===== 滚动条美化 ===== */
* {
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--border)) transparent;
}

/* ===== 选中文本 ===== */
::selection {
  background-color: hsl(var(--primary) / 0.15);
  color: hsl(var(--foreground));
}

/* ===== 隐藏调试工具浮层 ===== */
#__vue-devtools-container__,
#__vue-devtools-overlay__,
#__vue-devtools-frame__,
#__nuxt-devtools__,
vue-devtools,
vue-devtools-anchor,
[data-vue-devtools],
[id*="vue-devtools"],
[class*="vue-devtools"] {
  display: none !important;
}

/* Label badge: hide delete button by default, show on hover (desktop) */
.label-badge-delete {
  visibility: hidden;
  width: 0;
  padding: 0;
  overflow: hidden;
  transition: visibility 0.1s, width 0.1s, padding 0.1s, opacity 0.15s;
}
.label-badge:hover .label-badge-delete,
.label-badge:focus-within .label-badge-delete {
  visibility: visible;
  width: 1rem;
  padding: 0;
  opacity: 1 !important;
}

/* Touch devices: always show the delete button inside label badges */
@media (hover: none) and (pointer: coarse) {
  .label-badge-delete {
    visibility: visible;
    width: 1rem;
    padding: 0;
    opacity: 1 !important;
  }
}