|
|
@ -380,6 +380,13 @@ |
|
|
@apply hidden; |
|
|
@apply hidden; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* Tailwind v4 Preflight 不再为 button 默认设置 pointer;见官方升级说明: |
|
|
|
|
|
* https://tailwindcss.com/docs/upgrade-guide#buttons-use-the-default-cursor */ |
|
|
|
|
|
button:not(:disabled), |
|
|
|
|
|
[role='button']:not(:disabled) { |
|
|
|
|
|
@apply cursor-pointer; |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/* Custom utilities (v4 @utility syntax) */ |
|
|
/* Custom utilities (v4 @utility syntax) */ |
|
|
@ -396,33 +403,36 @@ |
|
|
justify-content: center; |
|
|
justify-content: center; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/* Component styles (complex selectors, not convertible to @utility) */ |
|
|
/* Tailwind v4 的 utilities 在 @layer 内;组件样式若留在 layer 外(unlayered),会按层叠规则压过 py-4 等工具类。 |
|
|
.outline-box { |
|
|
* 见:https://tailwindcss.com/docs/adding-custom-styles#using-css-and-layering */ |
|
|
@apply outline-border relative cursor-pointer rounded-md p-1 outline-1; |
|
|
@layer components { |
|
|
} |
|
|
.outline-box { |
|
|
|
|
|
@apply outline-border relative cursor-pointer rounded-md p-1 outline-1; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
.outline-box::after { |
|
|
.outline-box::after { |
|
|
@apply absolute top-1/2 left-1/2 z-20 h-0 w-px rounded-sm opacity-0 outline-2 outline-transparent transition-all duration-300 content-[""]; |
|
|
@apply absolute top-1/2 left-1/2 z-20 h-0 w-px rounded-sm opacity-0 outline-2 outline-transparent transition-all duration-300 content-[""]; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.outline-box.outline-box-active { |
|
|
.outline-box.outline-box-active { |
|
|
@apply outline-primary outline-2; |
|
|
@apply outline-primary outline-2; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.outline-box.outline-box-active::after { |
|
|
.outline-box.outline-box-active::after { |
|
|
display: none; |
|
|
display: none; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.outline-box:not(.outline-box-active):hover::after { |
|
|
.outline-box:not(.outline-box-active):hover::after { |
|
|
@apply outline-primary top-0 left-0 h-full w-full p-1 opacity-100; |
|
|
@apply outline-primary top-0 left-0 h-full w-full p-1 opacity-100; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.vben-link { |
|
|
.vben-link { |
|
|
@apply text-primary hover:text-primary-hover active:text-primary-active cursor-pointer; |
|
|
@apply text-primary hover:text-primary-hover active:text-primary-active cursor-pointer; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.card-box { |
|
|
.card-box { |
|
|
@apply bg-card text-card-foreground border-border rounded-xl border; |
|
|
@apply bg-card text-card-foreground border-border rounded-xl border; |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/* Enter animations (converted from enterAnimationPlugin) */ |
|
|
/* Enter animations (converted from enterAnimationPlugin) */ |
|
|
|