komari-theme-purcarte/src/index.css

@import "tailwindcss/theme";
@import "./palette-rgb.css";
@import "tailwindcss/preflight";
@import "tailwindcss/utilities";

@custom-variant dark (&:is(.dark *));

@theme inline {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

:root {
  --radius: 0.625rem;
  --background: #fafafa;
  --foreground: #0a0a0a;
  --card: var(--card-light, #ffffff80);
  --card-foreground: #0a0a0a;
  --popover: #ffffff;
  --popover-foreground: #0a0a0a;
  --primary: #171717;
  --primary-foreground: #fafafa;
  --secondary: #f5f5f5;
  --secondary-foreground: #171717;
  --muted: #f5f5f5;
  --muted-foreground: #737373;
  --accent: #f5f5f5;
  --accent-foreground: #171717;
  --destructive: #df0000;
  --destructive-transparent: #df00001a;
  --border: #e5e5e5;
  --input: #e5e5e5;
  --ring: #a1a1a1;
  --chart-1: #f54900;
  --chart-2: #009689;
  --chart-3: #104e64;
  --chart-4: #ffb900;
  --chart-5: #fe9a00;
  --sidebar: #fafafa;
  --sidebar-foreground: #0a0a0a;
  --sidebar-primary: #171717;
  --sidebar-primary-foreground: #fafafa;
  --sidebar-accent: #f5f5f5;
  --sidebar-accent-foreground: #171717;
  --sidebar-border: #e5e5e5;
  --sidebar-ring: #a1a1a1;

  --body-background-url: url("");
}

.dark {
  --background: #0a0a0a;
  --foreground: #fafafa;
  --card: var(--card-dark, #17171780);
  --card-foreground: #fafafa;
  --popover: #171717;
  --popover-foreground: #fafafa;
  --primary: #e5e5e5;
  --primary-foreground: #171717;
  --secondary: #262626;
  --secondary-foreground: #fafafa;
  --muted: #262626;
  --muted-foreground: #a1a1a1;
  --accent: #262626;
  --accent-foreground: #fafafa;
  --destructive: #ff9395;
  --destructive-transparent: #ff939540;
  --border: #ffffff1a;
  --input: #ffffff26;
  --ring: #737373;
  --chart-1: #1447e6;
  --chart-2: #00bc7d;
  --chart-3: #fe9a00;
  --chart-4: #ad46ff;
  --chart-5: #ff2056;
  --sidebar: #171717;
  --sidebar-foreground: #fafafa;
  --sidebar-primary: #1447e6;
  --sidebar-primary-foreground: #fafafa;
  --sidebar-accent: #262626;
  --sidebar-accent-foreground: #fafafa;
  --sidebar-border: #ffffff1a;
  --sidebar-ring: #737373;
}

@layer base {
  * {
    @apply border-(--accent-4)/50 outline-ring/50;
  }
  body {
    @apply bg-background;
  }
  button {
    cursor: pointer;
  }
}

@layer utilities {
  .radix-themes {
    --purcarte-blur: 10px;
    --purcarte-card-color: var(--card-light);
    --theme-text-muted-color: rgb(from var(--accent-12) r g b / 0.8);
    --theme-line-muted-color: rgb(from var(--accent-10) r g b / 0.5);
  }

  .radix-themes.dark {
    --purcarte-card-color: var(--card-dark);
  }

  .purcarte-blur {
    @apply bg-(--purcarte-card-color)! backdrop-blur-(--purcarte-blur)!;
  }

  .rt-Badge-tag-transparent {
    --tag-transparent-bg: rgb(from var(--accent-4) r g b / 0.4);
    --tag-transparent-color: rgb(from var(--accent-11) r g b / 0.8);
    @apply bg-(--tag-transparent-bg) text-(--tag-transparent-color);
  }

  .theme-button {
    @apply bg-(--accent-a6)! hover:bg-(--accent-a5)!;
  }

  .theme-button-ghost {
    @apply hover:bg-(--accent-a6)! hover:bg-(--accent-a5)!;
  }

  .theme-text-shadow {
    @apply text-shadow-sm text-shadow-(color:--accent-a4);
  }

  .theme-card-style {
    @apply rounded-lg shadow-sm shadow-(color:--accent-a4) box-border border border-(--accent-a4);
  }

  .theme-text-muted {
    @apply text-(--theme-text-muted-color);
  }
}

/* 背景图片伪元素 */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: var(--body-background-url) center/cover no-repeat;
  /* transition: var(--body-background-transition); */
}

.striped-bg-red-translucent-diagonal {
  background-image: linear-gradient(
    45deg,
    var(--destructive-transparent) 25%,
    transparent 25%,
    transparent 50%,
    var(--destructive-transparent) 50%,
    var(--destructive-transparent) 75%,
    transparent 75%,
    transparent 100%
  );
  background-size: 60px 60px;
}