427 lines
11 KiB
CSS
427 lines
11 KiB
CSS
@layer base {
|
|
:where(a, a:hover, a:visited) {
|
|
text-decoration: none;
|
|
color: var(--color-typo-dark);
|
|
}
|
|
|
|
.center {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.spacer {
|
|
flex: 1 1;
|
|
}
|
|
|
|
.workspace {
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: stretch;
|
|
gap: var(--spacing-m);
|
|
padding: var(--spacing-m) var(--spacing-xl);
|
|
header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-xs);
|
|
line-height: 1.3em;
|
|
h3 {
|
|
font-size: var(--font-size-xl);
|
|
}
|
|
p {
|
|
font-size: var(--font-size-xs);
|
|
color: var(--color-neutral-focus);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 按钮默认样式 */
|
|
:where(button, .button) {
|
|
--button-neutral-bg: var(--color-neutral);
|
|
border: none;
|
|
border-radius: var(--border-radius-xxs);
|
|
padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
|
|
font-size: var(--font-size-s);
|
|
line-height: 1.5em;
|
|
color: var(--color-fg);
|
|
background-color: var(--button-neutral-bg);
|
|
&:hover:not([disabled]) {
|
|
background-color: oklch(from var(--button-neutral-bg) calc(l + (1 - l) * 0.2) c h);
|
|
}
|
|
&:active:not([disabled]) {
|
|
background-color: oklch(from var(--button-neutral-bg) calc(l * 0.9) c h);
|
|
}
|
|
&[disabled] {
|
|
cursor: not-allowed;
|
|
color: oklch(from var(--color-fg) calc(l * 0.5) calc(c * 0.3) 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 {
|
|
color: var(--color-fg);
|
|
background-color: var(--color-primary);
|
|
&:hover:not([disabled]) {
|
|
background-color: var(--color-primary-hover);
|
|
}
|
|
&:active:not([disabled]) {
|
|
background-color: var(--color-primary-active);
|
|
}
|
|
&[disabled] {
|
|
color: oklch(from var(--color-fg) calc(l * 0.5) calc(c * 0.3) h);
|
|
background-color: var(--color-primary-disabled);
|
|
}
|
|
}
|
|
&.secondary {
|
|
color: var(--color-fg);
|
|
background-color: var(--color-secondary);
|
|
&:hover:not([disabled]) {
|
|
background-color: var(--color-secondary-hover);
|
|
}
|
|
&:active:not([disabled]) {
|
|
background-color: var(--color-secondary-active);
|
|
}
|
|
&[disabled] {
|
|
color: oklch(from var(--color-fg) calc(l * 0.5) calc(c * 0.3) h);
|
|
background-color: var(--color-secondary-disabled);
|
|
}
|
|
}
|
|
&.accent {
|
|
color: var(--color-fg);
|
|
background-color: var(--color-accent);
|
|
&:hover:not([disabled]) {
|
|
background-color: var(--color-accent-hover);
|
|
}
|
|
&:active:not([disabled]) {
|
|
background-color: var(--color-accent-active);
|
|
}
|
|
&[disabled] {
|
|
color: oklch(from var(--color-fg) calc(l * 0.5) calc(c * 0.3) h);
|
|
background-color: var(--color-accent-disabled);
|
|
}
|
|
}
|
|
&.danger {
|
|
color: var(--color-fg);
|
|
background-color: var(--color-danger);
|
|
&:hover:not([disabled]) {
|
|
background-color: var(--color-danger-hover);
|
|
}
|
|
&:active:not([disabled]) {
|
|
background-color: var(--color-danger-active);
|
|
}
|
|
&[disabled] {
|
|
color: oklch(from var(--color-fg) calc(l * 0.5) calc(c * 0.3) h);
|
|
background-color: var(--color-danger-disabled);
|
|
}
|
|
}
|
|
&.warn {
|
|
color: var(--color-fg);
|
|
background-color: var(--color-warn);
|
|
&:hover:not([disabled]) {
|
|
background-color: var(--color-warn-hover);
|
|
}
|
|
&:active:not([disabled]) {
|
|
background-color: var(--color-warn-active);
|
|
}
|
|
&[disabled] {
|
|
color: oklch(from var(--color-fg) calc(l * 0.5) calc(c * 0.3) h);
|
|
background-color: var(--color-warn-disabled);
|
|
}
|
|
}
|
|
&.success {
|
|
color: var(--color-fg);
|
|
background-color: var(--color-success);
|
|
&:hover:not([disabled]) {
|
|
background-color: var(--color-success-hover);
|
|
}
|
|
&:active:not([disabled]) {
|
|
background-color: var(--color-success-active);
|
|
}
|
|
&[disabled] {
|
|
color: oklch(from var(--color-fg) calc(l * 0.5) calc(c * 0.3) h);
|
|
background-color: var(--color-success-disabled);
|
|
}
|
|
}
|
|
&.info {
|
|
color: var(--color-fg);
|
|
background-color: var(--color-info);
|
|
&:hover:not([disabled]) {
|
|
background-color: var(--color-info-hover);
|
|
}
|
|
&:active:not([disabled]) {
|
|
background-color: var(--color-info-active);
|
|
}
|
|
&[disabled] {
|
|
color: oklch(from var(--color-fg) calc(l * 0.5) calc(c * 0.3) h);
|
|
background-color: var(--color-info-disabled);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 输入框以及输入框组合体默认样式 */
|
|
: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: center;
|
|
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);
|
|
}
|
|
|
|
/* 仅展示一个图标的ActionIcon */
|
|
:where(.action_icon) {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: calc(var(--spacing) * 2);
|
|
border-radius: var(--border-radius-xxs);
|
|
background-color: transparent;
|
|
cursor: pointer;
|
|
svg {
|
|
width: 1em;
|
|
height: 1em;
|
|
color: var(--color-neutral);
|
|
}
|
|
&:hover:not([disabled]) {
|
|
background-color: var(--color-neutral-hover);
|
|
svg {
|
|
color: var(--color-fg);
|
|
}
|
|
}
|
|
&:active:not([disabled]) {
|
|
background-color: var(--color-neutral-active);
|
|
svg {
|
|
color: var(--color-fg);
|
|
}
|
|
}
|
|
&[disabled] {
|
|
cursor: not-allowed;
|
|
svg {
|
|
color: var(--color-neutral-disabled);
|
|
}
|
|
}
|
|
&.primary {
|
|
svg {
|
|
color: var(--color-primary);
|
|
}
|
|
&:hover:not([disabled]) {
|
|
background-color: var(--color-primary-hover);
|
|
}
|
|
&:active:not([disabled]) {
|
|
background-color: var(--color-primary-active);
|
|
}
|
|
&[disabled] {
|
|
svg {
|
|
color: var(--color-primary-disabled);
|
|
}
|
|
}
|
|
}
|
|
&.secondary {
|
|
svg {
|
|
color: var(--color-secondary);
|
|
}
|
|
&:hover:not([disabled]) {
|
|
background-color: var(--color-secondary-hover);
|
|
}
|
|
&:active:not([disabled]) {
|
|
background-color: var(--color-secondary-active);
|
|
}
|
|
&[disabled] {
|
|
svg {
|
|
color: var(--color-secondary-disabled);
|
|
}
|
|
}
|
|
}
|
|
&.accent {
|
|
svg {
|
|
color: var(--color-accent);
|
|
}
|
|
&:hover:not([disabled]) {
|
|
background-color: var(--color-accent-hover);
|
|
}
|
|
&:active:not([disabled]) {
|
|
background-color: var(--color-accent-active);
|
|
}
|
|
&[disabled] {
|
|
svg {
|
|
color: var(--color-accent-disabled);
|
|
}
|
|
}
|
|
}
|
|
&.danger {
|
|
svg {
|
|
color: var(--color-danger);
|
|
}
|
|
&:hover:not([disabled]) {
|
|
background-color: var(--color-danger-hover);
|
|
}
|
|
&:active:not([disabled]) {
|
|
background-color: var(--color-danger-active);
|
|
}
|
|
&[disabled] {
|
|
svg {
|
|
color: var(--color-danger-disabled);
|
|
}
|
|
}
|
|
}
|
|
&.warn {
|
|
svg {
|
|
color: var(--color-warn);
|
|
}
|
|
&:hover:not([disabled]) {
|
|
background-color: var(--color-warn-hover);
|
|
}
|
|
&:active:not([disabled]) {
|
|
background-color: var(--color-warn-active);
|
|
}
|
|
&[disabled] {
|
|
svg {
|
|
color: var(--color-warn-disabled);
|
|
}
|
|
}
|
|
}
|
|
&.success {
|
|
svg {
|
|
color: var(--color-success);
|
|
}
|
|
&:hover:not([disabled]) {
|
|
background-color: var(--color-success-hover);
|
|
}
|
|
&:active:not([disabled]) {
|
|
background-color: var(--color-success-active);
|
|
}
|
|
&[disabled] {
|
|
svg {
|
|
color: var(--color-success-disabled);
|
|
}
|
|
}
|
|
}
|
|
&.info {
|
|
svg {
|
|
color: var(--color-info);
|
|
}
|
|
&:hover:not([disabled]) {
|
|
background-color: var(--color-info-hover);
|
|
}
|
|
&:active:not([disabled]) {
|
|
background-color: var(--color-info-active);
|
|
}
|
|
&[disabled] {
|
|
svg {
|
|
color: var(--color-info-disabled);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 颜色选择器滑杆 */
|
|
input[type='range'].picker {
|
|
-webkit-appearance: none;
|
|
width: 100%;
|
|
height: 1em;
|
|
background: transparent;
|
|
&::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width: 1em;
|
|
height: 1em;
|
|
background: oklch(from var(--color-primary) l c h / 70%);
|
|
border-radius: var(--border-radius-xxs);
|
|
cursor: pointer;
|
|
}
|
|
&::-moz-range-thumb {
|
|
width: 1em;
|
|
height: 1em;
|
|
background: oklch(from var(--color-primary) l c h / 70%);
|
|
border-radius: var(--border-radius-xxs);
|
|
cursor: pointer;
|
|
}
|
|
&::-webkit-slider-runnable-track {
|
|
width: 100%;
|
|
height: 1em;
|
|
cursor: pointer;
|
|
background: transparent;
|
|
border-radius: var(--border-radius-xxs);
|
|
}
|
|
&::-moz-range-track {
|
|
width: 100%;
|
|
height: 1em;
|
|
cursor: pointer;
|
|
background: transparent;
|
|
border-radius: var(--border-radius-xxs);
|
|
}
|
|
}
|
|
|
|
/* Badge */
|
|
.badge {
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: var(--spacing-xs) var(--spacing-m);
|
|
border-radius: var(--border-radius-xxs);
|
|
font-size: var(--font-size-m);
|
|
font-weight: bold;
|
|
line-height: 1.2em;
|
|
color: var(--color-fg);
|
|
background-color: var(--color-neutral);
|
|
&.uppercase {
|
|
text-transform: uppercase;
|
|
}
|
|
&.primary {
|
|
background-color: var(--color-primary);
|
|
}
|
|
&.secondary {
|
|
background-color: var(--color-secondary);
|
|
}
|
|
&.accent {
|
|
background-color: var(--color-accent);
|
|
}
|
|
&.danger {
|
|
background-color: var(--color-danger);
|
|
}
|
|
&.warn {
|
|
background-color: var(--color-warn);
|
|
}
|
|
&.success {
|
|
background-color: var(--color-success);
|
|
}
|
|
&.info {
|
|
background-color: var(--color-info);
|
|
}
|
|
}
|
|
}
|