mirror of
https://github.com/l0ng-ai/openidea.git
synced 2026-11-08 08:52:12 +00:00
140 lines
3.1 KiB
CSS
140 lines
3.1 KiB
CSS
/* IntelliJ new UI buttons: Button.arc 8 (radius 4), minimumSize 72×28, 2px focus ring outside. */
|
||
.button {
|
||
--button-radius: var(--radius-control, 4px);
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 6px;
|
||
height: var(--h-button, 28px);
|
||
min-width: 72px;
|
||
padding: 0 16px;
|
||
border-radius: var(--button-radius);
|
||
font-size: var(--fs-ui);
|
||
line-height: 1;
|
||
white-space: nowrap;
|
||
transition:
|
||
background var(--dur-fast) var(--ease),
|
||
color var(--dur-fast) var(--ease),
|
||
box-shadow var(--dur-fast) var(--ease);
|
||
}
|
||
.button:focus-visible {
|
||
outline: 2px solid var(--focus-ring);
|
||
outline-offset: 1px;
|
||
}
|
||
.button:disabled {
|
||
cursor: default;
|
||
}
|
||
.small {
|
||
height: var(--h-control);
|
||
min-width: 0;
|
||
padding: 0 10px;
|
||
}
|
||
|
||
.primary {
|
||
background: var(--bg-button-primary);
|
||
color: var(--fg-button-primary);
|
||
--icon-color: currentColor;
|
||
}
|
||
.primary:not(:disabled):hover {
|
||
background: var(--bg-button-primary-hover);
|
||
}
|
||
|
||
.secondary {
|
||
background: var(--bg-button);
|
||
color: var(--fg-strong);
|
||
box-shadow: inset 0 0 0 1px var(--border-button);
|
||
}
|
||
.secondary:not(:disabled):hover {
|
||
background: color-mix(in srgb, var(--bg-button) 94%, var(--fg-strong));
|
||
}
|
||
|
||
.primary:disabled,
|
||
.secondary:disabled {
|
||
background: transparent;
|
||
color: var(--fg-faint);
|
||
box-shadow: inset 0 0 0 1px var(--border);
|
||
}
|
||
|
||
.ghost {
|
||
min-width: 0;
|
||
padding: 0 8px;
|
||
color: var(--fg-secondary);
|
||
}
|
||
.ghost:not(:disabled):hover {
|
||
background: var(--bg-toolbar-hover);
|
||
color: var(--fg-strong);
|
||
}
|
||
.ghost:not(:disabled):active {
|
||
background: var(--bg-toolbar-pressed, color-mix(in srgb, var(--fg-strong) 12%, transparent));
|
||
}
|
||
.ghost:disabled {
|
||
color: var(--fg-faint);
|
||
}
|
||
|
||
/* Toolbar / action buttons: transparent on hover, filled when pressed or selected. */
|
||
.iconButton {
|
||
flex: none;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: var(--radius-toolbar-button, 6px);
|
||
color: var(--fg-muted);
|
||
transition:
|
||
background var(--dur-fast) var(--ease),
|
||
color var(--dur-fast) var(--ease);
|
||
}
|
||
.iconButton:focus-visible {
|
||
outline: 2px solid var(--focus-ring);
|
||
outline-offset: -2px;
|
||
}
|
||
.iconButton:not(:disabled):hover {
|
||
color: var(--fg-strong);
|
||
}
|
||
.iconButton:not(:disabled):active {
|
||
background: var(--bg-toolbar-pressed, color-mix(in srgb, var(--fg-strong) 12%, transparent));
|
||
}
|
||
.iconButton:disabled {
|
||
opacity: 0.4;
|
||
cursor: default;
|
||
}
|
||
.iconButton[aria-pressed="true"] {
|
||
background: var(--bg-toolbar-selected, var(--bg-tree-selected));
|
||
color: var(--fg-strong);
|
||
}
|
||
.iconButton[aria-pressed="true"]:not(:disabled):hover {
|
||
background: var(--bg-toolbar-selected-hover, color-mix(in srgb, var(--bg-tree-selected) 85%, var(--fg-strong)));
|
||
}
|
||
.is-small {
|
||
width: 20px;
|
||
height: 20px;
|
||
border-radius: var(--radius-small);
|
||
}
|
||
.is-normal {
|
||
width: 24px;
|
||
height: 24px;
|
||
}
|
||
.is-large {
|
||
width: 28px;
|
||
height: 28px;
|
||
}
|
||
.tone-danger {
|
||
color: var(--danger);
|
||
}
|
||
.tone-accent {
|
||
color: var(--accent);
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.button,
|
||
.iconButton {
|
||
transition: none;
|
||
}
|
||
}
|
||
|
||
@media (forced-colors: active) {
|
||
.secondary,
|
||
.primary {
|
||
border: 1px solid ButtonText;
|
||
}
|
||
}
|