nezha_dash/styles/globals.css

@import "tailwindcss";

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

@theme {
  --font-sans: var(--font-sans), ui-sans-serif, system-ui, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));

  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));

  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));

  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));

  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));

  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));

  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));

  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));

  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);

  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;

  @keyframes accordion-down {
    from {
      height: 0;
    }
    to {
      height: var(--radix-accordion-content-height);
    }
  }
  @keyframes accordion-up {
    from {
      height: var(--radix-accordion-content-height);
    }
    to {
      height: 0;
    }
  }
}

@utility container {
  margin-inline: auto;
  padding-inline: 2rem;
  @media (width >= theme(--breakpoint-sm)) {
    max-width: none;
  }
  @media (width >= 1400px) {
    max-width: 1400px;
  }
}

/*
  In Tailwind CSS v4, basic styles are applied to form elements by default. To
  maintain compatibility with v3, the following resets have been added:
*/
@layer base {
  input,
  textarea,
  select,
  button {
    border: 0px solid;
    border-radius: 0;
    padding: 0;
    color: inherit;
    background-color: transparent;
  }
}

/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

@utility step {
  counter-increment: step;

  &:before {
    @apply border-background bg-muted absolute inline-flex h-9 w-9 items-center justify-center rounded-full border-4 text-center -indent-px font-mono text-base font-medium;
    @apply mt-[-4px] ml-[-50px];
    content: counter(step);
  }
}

@layer base {
  :root {
    --background: 0 0% 98%;
    --foreground: 20 14.3% 4.1%;
    --card: 0 0% 100%;
    --card-foreground: 20 14.3% 4.1%;
    --popover: 0 0% 100%;
    --popover-foreground: 20 14.3% 4.1%;
    --primary: 24 9.8% 10%;
    --primary-foreground: 60 9.1% 97.8%;
    --secondary: 60 4.8% 95.9%;
    --secondary-foreground: 24 9.8% 10%;
    --muted: 60 4.8% 95.9%;
    --muted-foreground: 25 5.3% 44.7%;
    --accent: 60 4.8% 95.9%;
    --accent-foreground: 24 9.8% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 60 9.1% 97.8%;
    --border: 20 5.9% 90%;
    --input: 20 5.9% 90%;
    --ring: 20 14.3% 4.1%;
    --radius: 1rem;
    --chart-1: 220 70% 50%;
    --chart-2: 340 75% 55%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 160 60% 45%;
    --chart-6: 180 50% 50%;
    --chart-7: 216 50% 50%;
    --chart-8: 252 50% 50%;
    --chart-9: 288 50% 50%;
    --chart-10: 324 50% 50%;
    --timing: cubic-bezier(0.4, 0, 0.2, 1);
  }

  .dark {
    --background: 30 15% 8%;
    --foreground: 60 9.1% 97.8%;
    --card: 20 14.3% 4.1%;
    --card-foreground: 60 9.1% 97.8%;
    --popover: 20 14.3% 4.1%;
    --popover-foreground: 60 9.1% 97.8%;
    --primary: 60 9.1% 97.8%;
    --primary-foreground: 24 9.8% 10%;
    --secondary: 12 6.5% 15.1%;
    --secondary-foreground: 60 9.1% 97.8%;
    --muted: 12 6.5% 15.1%;
    --muted-foreground: 24 5.4% 63.9%;
    --accent: 12 6.5% 15.1%;
    --accent-foreground: 60 9.1% 97.8%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 60 9.1% 97.8%;
    --border: 12 6.5% 15.1%;
    --input: 12 6.5% 15.1%;
    --ring: 24 5.7% 82.9%;
    --chart-1: 220 70% 50%;
    --chart-2: 340 75% 55%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 160 60% 45%;
    --chart-6: 180 50% 50%;
    --chart-7: 216 50% 50%;
    --chart-8: 252 50% 50%;
    --chart-9: 288 50% 50%;
    --chart-10: 324 50% 50%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  html {
    @apply scroll-smooth;
  }
  body {
    @apply bg-background text-foreground;
    /* font-feature-settings: "rlig" 1, "calt" 1; */
    font-synthesis-weight: none;
    text-rendering: optimizeLegibility;
  }
}

@media (max-width: 640px) {
  .container {
    @apply px-4;
  }
}

::selection {
  @apply bg-stone-300 dark:bg-stone-800;
}

.hamster-loading-wrapper {
  --size: 12px;
  height: var(--size);
  width: var(--size);
  inset: 0;
  z-index: 10;
}

.hamster-loading-wrapper[data-visible="false"] {
  transform-origin: center;
  animation: hamster-fade-out 0.2s ease forwards;
}

.hamster-spinner {
  position: relative;
  top: 50%;
  left: 50%;
  height: var(--size);
  width: var(--size);
}

.hamster-loading-bar {
  --gray11: hsl(0, 0%, 43.5%);
  animation: hamster-spin 0.8s linear infinite;
  background: var(--gray11);
  border-radius: 6px;
  height: 13%;
  left: -10%;
  position: absolute;
  top: -3.9%;
  width: 30%;
}

.hamster-loading-bar:nth-child(1) {
  animation-delay: -0.8s;
  transform: rotate(0deg) translate(120%);
}

.hamster-loading-bar:nth-child(2) {
  animation-delay: -0.7s;
  transform: rotate(45deg) translate(120%);
}

.hamster-loading-bar:nth-child(3) {
  animation-delay: -0.6s;
  transform: rotate(90deg) translate(120%);
}

.hamster-loading-bar:nth-child(4) {
  animation-delay: -0.5s;
  transform: rotate(135deg) translate(120%);
}

.hamster-loading-bar:nth-child(5) {
  animation-delay: -0.4s;
  transform: rotate(180deg) translate(120%);
}

.hamster-loading-bar:nth-child(6) {
  animation-delay: -0.3s;
  transform: rotate(225deg) translate(120%);
}

.hamster-loading-bar:nth-child(7) {
  animation-delay: -0.2s;
  transform: rotate(270deg) translate(120%);
}

.hamster-loading-bar:nth-child(8) {
  animation-delay: -0.1s;
  transform: rotate(315deg) translate(120%);
}

@keyframes hamster-fade-in {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes hamster-fade-out {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.8);
  }
}

@keyframes hamster-spin {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.15;
  }
}

.scrollbar-hidden {
  scrollbar-width: none; /* Firefox */
}

.scrollbar-hidden::-webkit-scrollbar {
  display: none; /* Chrome, Safari 和 Opera */
}

.tooltip-animate {
  opacity: 0;
  filter: blur(10px);
  animation: tooltip-fade-in 0.2s ease-in-out forwards;
}

@keyframes tooltip-fade-in {
  from {
    opacity: 0;
    filter: blur(10px);
  }
  to {
    opacity: 1;
    filter: blur(0px);
  }
}

/* Thanks to next.js. */
[data-issues-count-animation] {
  display: flex;
  justify-content: center;
  align-items: center;
}

[data-issues-count-animation] > div {
  text-align: center;
}

[data-issues-count-exit].animate {
  animation: fadeOut 300ms var(--timing) forwards;
}

[data-issues-count-enter].animate {
  animation: fadeIn 300ms var(--timing) forwards;
}

[data-issues-count-plural] {
  display: inline-block;
  animation: fadeIn 300ms var(--timing) forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    filter: blur(2px);
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    filter: blur(0px);
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
    filter: blur(0px);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-12px);
    filter: blur(2px);
  }
}