style(css): 添加文本样式和按钮样式
- 在 CSS 文件中添加了多种文本样式类,包括 normal_text、caption、small_caption、title、heading、label 和 navigate - 添加了按钮样式,包括默认样式和图标按钮样式 - 在 body 标签中添加了 antialiased 属性,以改善文本渲染效果
This commit is contained in:
@@ -4,7 +4,7 @@
|
|||||||
@layer base {
|
@layer base {
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
@apply scheme-dark size-full bg-surface text-on-surface select-none overflow-hidden;
|
@apply scheme-dark size-full bg-surface text-on-surface select-none overflow-hidden antialiased;
|
||||||
&[data-scheme='dark'] {
|
&[data-scheme='dark'] {
|
||||||
@apply scheme-dark;
|
@apply scheme-dark;
|
||||||
}
|
}
|
||||||
@@ -19,4 +19,39 @@
|
|||||||
.workspace {
|
.workspace {
|
||||||
@apply size-full overflow-hidden flex items-stretch gap-2 rounded-sm;
|
@apply size-full overflow-hidden flex items-stretch gap-2 rounded-sm;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.normal_text {
|
||||||
|
@apply text-sm/[1.2];
|
||||||
|
}
|
||||||
|
|
||||||
|
.caption {
|
||||||
|
@apply text-sm/[1];
|
||||||
|
}
|
||||||
|
|
||||||
|
.small_caption {
|
||||||
|
@apply text-[10px]/[1];
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
@apply text-lg font-bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading {
|
||||||
|
@apply text-2xl/[1.2] italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
@apply text-sm/[1.2] font-bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navigate {
|
||||||
|
@apply text-xs/[1];
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
@apply border-0 flex flex-row items-center justify-center gap-1 px-2 py-1;
|
||||||
|
&.icon {
|
||||||
|
@apply bg-swatch-neutral-40 text-on-surface;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user