mirror of
https://github.com/fluxerapp/fluxer
synced 2026-10-17 04:55:42 +09:00
96 lines
1.9 KiB
CSS
96 lines
1.9 KiB
CSS
/* SPDX-License-Identifier: AGPL-3.0-or-later */
|
|
|
|
.button {
|
|
--bg: transparent;
|
|
--bg-hover: var(--studio-bg-row-hover);
|
|
--bg-active: var(--studio-bg-row-active);
|
|
--fg: var(--studio-fg-primary);
|
|
--border: transparent;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.375rem;
|
|
height: var(--studio-row-height);
|
|
padding: 0 0.75rem;
|
|
font: inherit;
|
|
font-size: var(--studio-fs-sm);
|
|
font-weight: 500;
|
|
color: var(--fg);
|
|
background: var(--bg);
|
|
border: 0.0625rem solid var(--border);
|
|
border-radius: var(--studio-radius-md);
|
|
cursor: pointer;
|
|
user-select: none;
|
|
white-space: nowrap;
|
|
transition:
|
|
background var(--studio-transition-fast),
|
|
border-color var(--studio-transition-fast),
|
|
color var(--studio-transition-fast);
|
|
}
|
|
|
|
.button:hover:not(:disabled) {
|
|
background: var(--bg-hover);
|
|
}
|
|
|
|
.button:active:not(:disabled) {
|
|
background: var(--bg-active);
|
|
}
|
|
|
|
.button:disabled {
|
|
opacity: 0.45;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.compact {
|
|
height: var(--studio-row-height-compact);
|
|
padding: 0 0.625rem;
|
|
font-size: var(--studio-fs-xs);
|
|
}
|
|
|
|
.primary {
|
|
--bg: var(--studio-button-primary);
|
|
--bg-hover: var(--studio-button-primary-hover);
|
|
--bg-active: var(--studio-button-primary-hover);
|
|
--fg: var(--studio-fg-on-accent);
|
|
}
|
|
|
|
.secondary {
|
|
--bg: var(--studio-button-secondary);
|
|
--bg-hover: var(--studio-button-secondary-hover);
|
|
--bg-active: var(--studio-button-secondary-hover);
|
|
--fg: var(--button-secondary-text);
|
|
--border: var(--studio-border);
|
|
}
|
|
|
|
.ghost {
|
|
--bg: transparent;
|
|
}
|
|
|
|
.danger {
|
|
--bg: var(--studio-danger-soft);
|
|
--fg: var(--studio-danger);
|
|
--border: transparent;
|
|
}
|
|
|
|
.danger:hover:not(:disabled) {
|
|
background: var(--studio-danger-soft);
|
|
color: var(--studio-danger);
|
|
}
|
|
|
|
.dangerSolid {
|
|
--bg: var(--studio-danger);
|
|
--bg-hover: var(--studio-danger-hover);
|
|
--fg: var(--studio-fg-on-danger);
|
|
}
|
|
|
|
.leadingIcon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.label {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|