|
|
@@ -31,30 +31,18 @@ body::-webkit-scrollbar-thumb {
|
|
|
background-color: #d4d4d4;
|
|
|
}
|
|
|
|
|
|
-@theme {
|
|
|
- /* Custom breakpoints */
|
|
|
- --breakpoint-xxs: 375px;
|
|
|
- --breakpoint-xs: 425px;
|
|
|
- --breakpoint-xss: 525px;
|
|
|
- --breakpoint-400: 400px;
|
|
|
- --breakpoint-sm: 640px;
|
|
|
- --breakpoint-md: 768px;
|
|
|
- --breakpoint-lg: 1024px;
|
|
|
- --breakpoint-xl: 1280px;
|
|
|
- --breakpoint-2xl: 1610px;
|
|
|
- --breakpoint-3xl: 1640px;
|
|
|
- --breakpoint-1366: 1366px;
|
|
|
- /* Custom spacing */
|
|
|
- --spacing-7_5: 30px;
|
|
|
- --spacing-30: 120px;
|
|
|
- --spacing-92_5: 23.125rem;
|
|
|
- /* Font sizes */
|
|
|
- --font-size-xxs: 13px;
|
|
|
- /* Font family */
|
|
|
- --font-family-outfit: var(--font-outfit), system-ui, sans-serif;
|
|
|
+/**
|
|
|
+ * 移动端适配核心：clamp() 根字号 在390px设计稿下 16px ≈ 4.1025641vw = 1rem
|
|
|
+ * 比如 390px设计稿，有一个div宽度是120px，那么可以写 w-30，下面是换算原理：
|
|
|
+ * tailwindcss中单位用的是rem， 默认根字号为16px，也就是在tailwindcss中，0.25rem = 4px，
|
|
|
+ * 而对于类名 w-1 来说，这里的1就是0.25rem，即4px，那么w-1就是4px，w-2就是8px，以此类推
|
|
|
+ *
|
|
|
+ * */
|
|
|
+html {
|
|
|
+ font-size: clamp(10px, 4.1025641vw, 40px);
|
|
|
}
|
|
|
|
|
|
-/* GLOBAL VARIABLES */
|
|
|
+/* GLOBAL VARIABLES :root中定义常规变量，不被映射到工具类*/
|
|
|
:root {
|
|
|
/* Font families */
|
|
|
font-family: var(--font-outfit), system-ui, sans-serif;
|
|
|
@@ -70,27 +58,57 @@ body::-webkit-scrollbar-thumb {
|
|
|
--selected-bottom-dark: #95b6ff;
|
|
|
--selected-bg-bottom-dark: #314779;
|
|
|
--input-color: #b3b3b3;
|
|
|
- /* font size */
|
|
|
+
|
|
|
+ /* 字体尺寸 */
|
|
|
--font-size-xxs: 13px;
|
|
|
- /* Spacing */
|
|
|
+
|
|
|
+ /* 间距变量（供自定义类使用） */
|
|
|
--space-30: 120px;
|
|
|
--space-7_5: 30px;
|
|
|
--space-92_5: 23.125rem;
|
|
|
+}
|
|
|
+
|
|
|
+/*theme中定义的变量可以被映射到实用程序类(需要注意映射规则，不是所有变量都能映射)*/
|
|
|
+@theme {
|
|
|
+ /* 仅保留字体族定义，其他通过 :root 变量注入 */
|
|
|
+ --font-family-outfit: var(--font-outfit), system-ui, sans-serif;
|
|
|
|
|
|
- /* Screens (breakpoints) */
|
|
|
- --screen-xxs: 360px;
|
|
|
- --screen-xs: 425px;
|
|
|
- --screen-xss: 525px;
|
|
|
- --screen-400: 400px;
|
|
|
- --screen-sm: 640px;
|
|
|
- --screen-md: 768px;
|
|
|
- --screen-lg: 1024px;
|
|
|
- --screen-xl: 1280px;
|
|
|
- --screen-2xl: 1610px;
|
|
|
- --screen-3xl: 1640px;
|
|
|
- --screen-1366: 1366px;
|
|
|
+ /*自定义颜色*/
|
|
|
+ --color-ly-lightgray: #f2f2f2;
|
|
|
+ --color-ly-gray: #d3d3d3; /*可被映射为text-ly-gray，bg-ly-gray等相关的颜色类目*/
|
|
|
+ --color-ly-gold: #ffd700;
|
|
|
+ --color-ly-green: #01754a;
|
|
|
+ --color-ly-middlegreen: #036141;
|
|
|
+ --color-ly-deepgreen: #1e3932;
|
|
|
+ /*自定义字体大小 前缀 ly*/
|
|
|
+ --text-ly-12: 0.75rem;
|
|
|
+ --text-ly-14: 0.875rem;
|
|
|
+ --text-ly-16: 1rem;
|
|
|
+ --text-ly-18: 1.125rem;
|
|
|
+ --text-ly-20: 1.25rem;
|
|
|
+ --text-ly-22: 1.375rem;
|
|
|
+ --text-ly-24: 1.5rem;
|
|
|
+ --text-ly-30: 1.875rem; /* 1.875rem (30px) */
|
|
|
+ --text-ly-36: 2.25rem; /* 2.25rem (36px) */
|
|
|
+ --text-ly-48: 3rem; /* 3rem (48px) */
|
|
|
+
|
|
|
+ /*自定义行高 前缀 ly*/
|
|
|
+ --leading-ly-16: 1rem;
|
|
|
+ --leading-ly-18: 1.125rem;
|
|
|
+ --leading-ly-20: 1.25rem;
|
|
|
+ --leading-ly-22: 1.375rem;
|
|
|
+ --leading-ly-24: 1.5rem;
|
|
|
+ --leading-ly-26: 1.625rem;
|
|
|
+ --leading-ly-28: 1.75rem;
|
|
|
+ --leading-ly-36: 2.25rem;
|
|
|
}
|
|
|
|
|
|
+@utility h-ly-46 {
|
|
|
+ height: 2.875rem;
|
|
|
+}
|
|
|
+@utility strokeline-bg-disabled {
|
|
|
+ background-image:linear-gradient(to bottom right,transparent,transparent calc(50% - 1px),#acacac 50%,#acacac 0,transparent calc(50% + 1px));
|
|
|
+}
|
|
|
.dark {
|
|
|
--background: #171717;
|
|
|
--foreground: #ffffff;
|
|
|
@@ -120,18 +138,13 @@ body {
|
|
|
}
|
|
|
|
|
|
@layer components {
|
|
|
-
|
|
|
/* Hide scrollbar for drawer content */
|
|
|
.drawer-scrollbar-hidden {
|
|
|
scrollbar-width: none;
|
|
|
- /* Firefox */
|
|
|
-ms-overflow-style: none;
|
|
|
- /* IE and Edge */
|
|
|
}
|
|
|
-
|
|
|
.drawer-scrollbar-hidden::-webkit-scrollbar {
|
|
|
display: none;
|
|
|
- /* Chrome, Safari, Opera */
|
|
|
}
|
|
|
|
|
|
.placeholder-input-color::placeholder {
|
|
|
@@ -171,7 +184,6 @@ body {
|
|
|
0% {
|
|
|
transform: translateX(-100%);
|
|
|
}
|
|
|
-
|
|
|
100% {
|
|
|
transform: translateX(100%);
|
|
|
}
|
|
|
@@ -181,11 +193,6 @@ body {
|
|
|
aspect-ratio: 1.72;
|
|
|
}
|
|
|
|
|
|
- @media (min-width: 768px) {
|
|
|
- .image-carousel-aspect {
|
|
|
- aspect-ratio: 1.98;
|
|
|
- }
|
|
|
- }
|
|
|
|
|
|
/* Prevent body scrolling when drawer is open */
|
|
|
.scroll-locked {
|
fogwind