DZ-MXWPP-WEB/packages/@core/shared/design/src/css/global.css

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

@layer base {
  *,
  ::after,
  ::before {
    @apply border-border;

    box-sizing: border-box;
    border-style: solid;
    border-width: 0;
  }

  html {
    @apply text-foreground bg-background font-sans text-[100%];

    font-variation-settings: normal;
    line-height: 1.15;
    text-size-adjust: 100%;
    font-synthesis-weight: none;
    scroll-behavior: smooth;
    text-rendering: optimizelegibility;
    -webkit-tap-highlight-color: transparent;

    &.invert-mode {
      @apply invert;
    }

    &.grayscale-mode {
      @apply grayscale;
    }
  }

  #app,
  body,
  html {
    @apply size-full overscroll-none;
  }

  body {
    min-height: 100vh;

    /* overflow: overlay; */
    -webkit-font-smoothing: antialiased;
  }

  a,
  a:active,
  a:hover,
  a:link,
  a:visited {
    @apply no-underline;
  }

  ::view-transition-new(root),
  ::view-transition-old(root) {
    @apply animate-none mix-blend-normal;
  }

  ::view-transition-old(root) {
    @apply z-[1];
  }

  ::view-transition-new(root) {
    @apply z-[2147483646];
  }

  html.dark::view-transition-old(root) {
    @apply z-[2147483646];
  }

  html.dark::view-transition-new(root) {
    @apply z-[1];
  }

  input::placeholder,
  textarea::placeholder {
    @apply opacity-100;
  }

  input:-webkit-autofill {
    @apply border-none;

    box-shadow: 0 0 0 1000px transparent inset;
  }

  input[type='number']::-webkit-inner-spin-button,
  input[type='number']::-webkit-outer-spin-button {
    @apply m-0 appearance-none;
  }

  /* 考虑只在mac下打开 */

  /* *::-webkit-scrollbar {
    @apply h-[1px] w-[10px];
  }

  *::-webkit-scrollbar-thumb {
    @apply bg-border rounded-sm border-none;
  }

  *::-webkit-scrollbar-track {
    @apply rounded-sm border-none bg-transparent shadow-none;
  } */
}

@layer components {
  .flex-center {
    @apply flex items-center justify-center;
  }

  .flex-col-center {
    @apply flex flex-col items-center justify-center;
  }

  .outline-box {
    @apply outline-border relative cursor-pointer rounded-md p-1 outline outline-1;
  }

  .outline-box::after {
    @apply absolute left-1/2 top-1/2 z-20 h-0 w-[1px] rounded-sm opacity-0 outline outline-2 outline-transparent transition-all duration-300 content-[""];
  }

  .outline-box.outline-box-active {
    @apply outline-primary outline outline-2;
  }

  .outline-box.outline-box-active::after {
    display: none;
  }

  .outline-box:not(.outline-box-active):hover::after {
    @apply outline-primary left-0 top-0 h-full w-full p-1 opacity-100;
  }

  .card-box {
    @apply bg-card text-card-foreground border-border rounded-xl border shadow;
  }
}