temp

src/globals.css

@@ -1,64 +1,124 @@
-@config "../tailwind.config.js";
-@import "tailwindcss";
+@import 'tailwindcss';
+@import './assets/styles.css';
+@import './index.css';
 
-@layer base {
-  html,
-  body {
-    width: 100%;
-    height: 100%;
-    font-size: 16px;
-    font-family: 'Montserrat', sans-serif;
-  }
-  h1 {
-    @apply text-2xl font-bold;
-  }
-  h2 {
-    @apply text-xl font-bold;
-  }
-  h3 {
-    @apply text-lg font-bold;
+@theme {
+  --color-primary: white;
+  --color-secondary: #14171a;
+}
+html,
+body {
+  width: 100%;
+  height: 100%;
+  font-size: 16px;
+  font-family: 'Montserrat', sans-serif;
+}
+h1 {
+  @apply text-2xl font-bold;
+}
+h2 {
+  @apply text-xl font-bold;
+}
+h3 {
+  @apply text-lg font-bold;
+}
+@utility card {
+  @apply bg-white shadow-md rounded-lg p-4;
+}
+@utility card-title {
+  @apply text-lg font-bold;
+}
+@utility card-subtitle {
+  @apply text-sm text-gray-500;
+}
+@utility card-description {
+  @apply text-gray-700 break-words;
+}
+@utility card-code {
+  @apply bg-gray-100 p-2;
+}
+@utility card-body {
+  @apply text-gray-700;
+}
+@utility card-key {
+  @apply text-xs text-gray-400;
+}
+@utility card-footer {
+  @apply text-sm text-gray-500;
+}
+@utility btn {
+  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded-sm;
+}
+
+@utility layout-menu {
+  @apply bg-gray-900 p-2 text-white flex justify-between h-12;
+  -webkit-app-region: drag;
+}
+@utility no-drag {
+  -webkit-app-region: no-drag;
+}
+@utility bg-custom-blue {
+  background-color: #3490dc;
+}
+
+@utility scrollbar-hidden {
+  &::-webkit-scrollbar {
+    display: none;
   }
 }
 
-@layer components {
-  .btn {
-    @apply bg-blue-500 text-white font-bold py-2 px-4 rounded-sm;
-  }
-  .card {
-    @apply bg-white shadow-md rounded-lg p-4;
-    .card-title {
-      @apply text-lg font-bold;
-    }
-    .card-subtitle {
-      @apply text-sm text-gray-500;
-    }
-    .card-description {
-      @apply text-gray-700 break-words;
-    }
-    .card-code {
-      @apply bg-gray-100 p-2;
-    }
-    .card-body {
-      @apply text-gray-700;
-    }
-    .card-key {
-      @apply text-xs text-gray-400;
-    }
-    .card-footer {
-      @apply text-sm text-gray-500;
-    }
-  }
+/* font-family */
+@utility font-family-mon {
+  font-family: 'Montserrat', sans-serif;
+}
+@utility font-family-rob {
+  font-family: 'Roboto', sans-serif;
+}
+@utility font-family-int {
+  font-family: 'Inter', sans-serif;
+}
+@utility font-family-orb {
+  font-family: 'Orbitron', sans-serif;
+}
+@utility font-family-din {
+  font-family: 'DIN', sans-serif;
 }
 
-@layer utilities {
-  .layout-menu {
-    @apply bg-gray-900 p-2 text-white flex justify-between h-12;
-    -webkit-app-region: drag;
+@utility flex-row-center {
+  @apply flex flex-row items-center justify-center;
+}
+@utility flex-col-center {
+  @apply flex flex-col items-center justify-center;
+}
+
+@utility scrollbar {
+  overflow: auto;
+  /* 整个滚动条 */
+  &::-webkit-scrollbar {
+    width: 3px;
+    height: 3px;
   }
-  .no-drag {
-    -webkit-app-region: no-drag; 
+
+  /* 滚动条有滑块的轨道部分 */
+  &::-webkit-scrollbar-track-piece {
+    background-color: transparent;
+    border-radius: 1px;
   }
-  .bg-custom-blue {
-    background-color: #3490dc;
+
+  /* 滚动条滑块(竖向:vertical 横向:horizontal) */
+  &::-webkit-scrollbar-thumb {
+    cursor: pointer;
+    background-color: #c1c1c1;
+    border-radius: 5px;
+  }
+
+  /* 滚动条滑块hover */
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: #999999;
+  }
+
+  /* 同时有垂直和水平滚动条时交汇的部分 */
+  &::-webkit-scrollbar-corner {
+    display: block; /* 修复交汇时出现的白块 */
   }
 }