@tailwind base;
|
@tailwind components;
|
@tailwind utilities;
|
|
/* 解决 container 样式冲突问题
|
--------------------------------------------------------- */
|
.container {
|
max-width: unset;
|
}
|
@layer base {
|
// 默认主题色黑色
|
:root {
|
// 背景色
|
--color-bg-base: #41424a;
|
--color-bg-base-exr: #2b2c30;
|
--color-bg-side: #1c1e1d;
|
--color-bg-border: #737373;
|
// 卡片颜色
|
--color-bg-card: 55, 65, 81;
|
// 按钮颜色
|
--color-bg-btn: 75, 85, 99;
|
// 按钮hover颜色
|
--color-bg-btn-hover: #0084ff;
|
// 字体颜色
|
--color-text-base: #fff;
|
--color-text-font: #b9b9b9;
|
// 按钮字体颜色
|
--color-btn-base: #0084ff;
|
--color-bg-avatar: #1d86ff;
|
}
|
.theme-pink {
|
// 背景色
|
--color-bg-base: #f9a8d4;
|
--color-bg-base-exr: rgb(255 78 174);
|
--color-bg-side: #ec4899;
|
--color-bg-border: #fff;
|
// 卡片颜色
|
--color-bg-card: 249, 168, 212;
|
// 按钮颜色
|
--color-bg-btn: 236, 72, 153;
|
// 按钮hover颜色
|
--color-bg-btn-hover: #fff;
|
// 字体颜色
|
--color-text-base: #ec4899;
|
--color-text-font: #fff;
|
// 按钮字体颜色
|
--color-btn-base: #fff;
|
--color-bg-avatar: #1d86ff;
|
}
|
.theme-blue {
|
// 背景色
|
--color-bg-base: #93c5fd;
|
--color-bg-base-exr: rgb(17 118 221);
|
--color-bg-side: #3b82f6;
|
--color-bg-border: #fff;
|
// 卡片颜色
|
--color-bg-card: 147, 197, 253;
|
// 按钮颜色
|
--color-bg-btn: 96, 165, 250;
|
// 按钮hover颜色
|
--color-bg-btn-hover: #fff;
|
// 字体颜色
|
--color-text-base: #fff;
|
--color-text-font: #fff;
|
// 按钮字体颜色
|
--color-btn-base: #fff;
|
--color-bg-avatar: #2b2c30;
|
}
|
}
|
|
@layer components {
|
.s-btn {
|
// 按钮的基础样式
|
@apply bg-skin-btn hover:bg-skin-btn-hover rounded;
|
}
|
.s-card {
|
// 卡片的基础样式
|
@apply bg-skin-card rounded-2xl p-8 min-w-max min-h-max flex flex-col items-center;
|
}
|
}
|
