xt/color-q
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

调整各式按钮的样式。

Browse Source
This commit is contained in:
徐涛 2024-12-25 16:42:12 +08:00
parent 5dc879974f
commit 4135ab5c8f
1 changed files with 46 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/component.css
View File

@ -3,7 +3,7 @@
a:hover, a:hover,
a:visited { a:visited {
text-decoration: none; text-decoration: none;
color: var(--color-fg); color: var(--color-typo-dark);
} }
.center { .center {
@ -20,7 +20,9 @@
border: none; border: none;
border-radius: var(--border-radius-xxs); border-radius: var(--border-radius-xxs);
padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4); padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
color: light-dark(var(--color-typo-light), var(--color-typo-dark)); font-size: var(--font-size-s);
line-height: 1.5em;
color: var(--color-typo-dark);
background-color: var(--button-neutral-bg); background-color: var(--button-neutral-bg);
&:hover { &:hover {
background-color: oklch(from var(--button-neutral-bg) calc(l + (1 - l) * 0.2) c h); background-color: oklch(from var(--button-neutral-bg) calc(l + (1 - l) * 0.2) c h);
@ -32,6 +34,15 @@
color: var(--color-typo-dark-darkness); color: var(--color-typo-dark-darkness);
background-color: oklch(from var(--button-neutral-bg) calc(l * 0.8) calc(c * 0.1) h); background-color: oklch(from var(--button-neutral-bg) calc(l * 0.8) calc(c * 0.1) h);
} }
&.small {
font-size: var(--font-size-xs);
}
&.large {
font-size: var(--font-size-m);
}
&.larger {
font-size: var(--font-size-l);
}
&.primary { &.primary {
color: var(--color-typo-dark-lightness); color: var(--color-typo-dark-lightness);
background-color: var(--color-primary); background-color: var(--color-primary);
@ -103,4 +114,37 @@
} }
} }
} }
/* 输入框以及输入框组合体默认样式 */
:where(input, textarea) {
border: 1px solid oklch(from var(--color-bg) calc(l + (1 - l) * 0.1) c h);
border-radius: var(--border-radius-xxs);
padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
background-color: oklch(from var(--color-bg) calc(l * 0.8) c h);
.input_wrapper & {
padding: 0;
border: none;
flex-grow: 1;
}
&:focus {
outline: none;
}
&[type='number']::-webkit-outer-spin-button,
&[type='number']::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
}
textarea {
resize: none;
}
.input_wrapper {
display: flex;
flex-direction: row;
align-items: stretch;
gap: calc(var(--spacing) * 2);
border: 1px solid oklch(from var(--color-bg) calc(l + (1 - l) * 0.1) c h);
padding: calc(var(--spacing) * 2);
background-color: oklch(from var(--color-bg) calc(l * 0.8) c h);
}
} }