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

$white:#fff;

:root {
  --scrollbar-bg:rgba(0, 0, 0, .15);
  --scrollbar-hover: rgba(0, 0, 0, .25);
  font-family: 'Maple Mono CN', system-ui, Avenir, Helvetica, Arial, sans-serif;
}

// 黑夜模式
.dark{
  --scrollbar-bg:rgba(255, 255, 255, .45);
  --scrollbar-hover: rgba(255, 255, 255, .25);
}

// 全局按钮样式
.btn-icon {
  @apply cursor-pointer ease-in-out p-2 rounded-md text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800;
}

// 文字样式
.text-mode {
  @apply text-black/45 dark:text-white/85;
}

@keyframes loaderBefore {
  0% {
   width: 0.5em;
   box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
  }
 
  35% {
   width: 2.5em;
   box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75), 0 0.5em rgba(111, 202, 220, 0.75);
  }
 
  70% {
   width: 0.5em;
   box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75), 1em 0.5em rgba(111, 202, 220, 0.75);
  }
 
  100% {
   box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
  }
 }
 
 @keyframes loaderAfter {
  0% {
   height: 0.5em;
   box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
  }
 
  35% {
   height: 2.5em;
   box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75), -0.5em 0 rgba(233, 169, 32, 0.75);
  }
 
  70% {
   height: 0.5em;
   box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75), -0.5em 1em rgba(233, 169, 32, 0.75);
  }
 
  100% {
   box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
  }
 }

/* 修改滚动条样式 */
*::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-bg);
  border-radius: 2.5px;
  transition: .35s background-color;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-hover);
}

*::-webkit-scrollbar-track {
  background-color: transparent;
}