mirror of
https://github.com/CherryHQ/cherry-studio.git
synced 2026-01-28 22:53:11 +08:00
d164d7c8bf
- Changed the main CSS file reference from `globals.css` to `theme.css` in `components.json` for better theme management. - Introduced `index.css` to export only CSS variables, allowing npm users to utilize design tokens without overriding Tailwind defaults. - Removed `globals.css` as it is no longer needed with the new structure. - Updated `package.json` to reflect changes in CSS file paths. - Enhanced `README.md` to clarify installation and configuration steps for the new styling approach.
77 lines
1.9 KiB
CSS
77 lines
1.9 KiB
CSS
@import '../../../../../packages/ui/src/styles/theme.css';
|
|
@import 'tw-animate-css';
|
|
|
|
/* TODO heroui 迁移完成后即可删除 */
|
|
/* heroui */
|
|
/* @plugin '../../hero.ts'; */
|
|
/* @source '../../../../../packages/ui/src*.{js,ts,jsx,tsx}'; */
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
/* 如需自定义:
|
|
1. 清晰地组织自定义 CSS 到相应的层中。
|
|
2. 基础样式（如全局重置、链接样式）放入 base 层；
|
|
3. 可复用的组件样式（如果仍使用 @apply 或原生 CSS 嵌套创建）放入 components 层；
|
|
4. 新的自定义工具类放入 utilities 层。
|
|
*/
|
|
/*To customize:
|
|
1. Clearly organize custom CSS into the corresponding layers.
|
|
2. Place basic styles (such as global reset and link styles) in the base layer;
|
|
3. Put reusable component styles (if still created using @ apply or native CSS nesting) into the components layer;
|
|
4. Put the new custom utility class into the utilities layer.
|
|
*/
|
|
|
|
/* 应用特定的原始变量 */
|
|
:root {
|
|
--icon: #00000099;
|
|
}
|
|
|
|
.dark {
|
|
--icon: #ffffff99;
|
|
}
|
|
|
|
/* 应用特定的变量和动画（不与 UI 库冲突） */
|
|
@theme inline {
|
|
/* Icon 颜色 - 应用特定变量 */
|
|
--color-icon: var(--icon);
|
|
|
|
/* 跑马灯动画 - 应用特定 */
|
|
--animate-marquee: marquee var(--duration) infinite linear;
|
|
--animate-marquee-vertical: marquee-vertical var(--duration) linear infinite;
|
|
|
|
@keyframes marquee {
|
|
from {
|
|
transform: translateX(0);
|
|
}
|
|
to {
|
|
transform: translateX(calc(-100% - var(--gap)));
|
|
}
|
|
}
|
|
@keyframes marquee-vertical {
|
|
from {
|
|
transform: translateY(0);
|
|
}
|
|
to {
|
|
transform: translateY(calc(-100% - var(--gap)));
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border outline-ring/50;
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
}
|
|
|
|
/* To disable drag title bar on toast. tailwind css doesn't provide such class name. */
|
|
.hero-toast {
|
|
-webkit-app-region: no-drag;
|
|
}
|
|
}
|
|
|
|
:root {
|
|
background-color: unset;
|
|
}
|