55 lines
1.3 KiB
CSS
55 lines
1.3 KiB
CSS
button.input-button {
|
|
cursor: pointer;
|
|
border: var(--border-thickness) solid var(--background-primary);
|
|
background-color: var(--background-tertiary);
|
|
padding: 8px;
|
|
width: 100%;
|
|
}
|
|
|
|
button.input-button.selected {
|
|
background-color: var(--background-primary);
|
|
color: var(--font-color-primary);
|
|
}
|
|
|
|
button.input-button:disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
button.input-button:not(.selected):not(.rainbow):disabled {
|
|
opacity: 0.5;
|
|
color: var(--font-color-secondary);
|
|
}
|
|
|
|
button.input-button:not(:disabled):hover,
|
|
button.input-button:not(:disabled):focus-visible {
|
|
border-color: var(--background-highlight);
|
|
}
|
|
|
|
button.input-button.rainbow {
|
|
position: relative;
|
|
animation: rainbow-border 1s linear infinite;
|
|
border: 2px solid transparent;
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
button.input-button.rainbow::before {
|
|
position: absolute;
|
|
z-index: -1;
|
|
animation: input-button-rainbow-shift 1s linear infinite;
|
|
inset: -2px;
|
|
border-radius: inherit;
|
|
background: linear-gradient(90deg, red, orange, yellow, green, cyan, blue, violet, red);
|
|
background-size: 200%;
|
|
content: '';
|
|
}
|
|
|
|
@keyframes input-button-rainbow-shift {
|
|
from {
|
|
background-position: 0%;
|
|
}
|
|
|
|
to {
|
|
background-position: 200%;
|
|
}
|
|
}
|