mirror of
https://github.com/FrankerFaceZ/FrankerFaceZ.git
synced 2025-06-27 21:05:53 +00:00
ae90b8e4fe
* Added: Setting to display timestamps on additional types of chat messages. (Closes #983) * Changed: Do not set a Chat Width by default. * Changed: Have WebMunch dump a list of possible webpack bundle names when failing to find webpack. * Fixed: Appearance issues caused by Twitch's continual migration to procedural CSS class names, requiring duplicate CSS to achieve a native look. * Fixed: Ambiguous input field names in some FFZ Control Center widgets. (Closes #1017) * Fixed: Stop using Algolia for tag search.
223 lines
No EOL
6.3 KiB
SCSS
223 lines
No EOL
6.3 KiB
SCSS
.ffz-core-button {
|
|
font-size: var(--button-text-default);
|
|
font-weight: 600;
|
|
height: var(--button-size-default);
|
|
user-select: none;
|
|
white-space: nowrap;
|
|
|
|
&, &:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
&--small {
|
|
font-size: var(--button-text-small);
|
|
height: var(--button-size-small);
|
|
}
|
|
|
|
&--large {
|
|
font-size: var(--button-text-large);
|
|
height: var(--button-size-large);
|
|
}
|
|
|
|
&--disabled {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
&:disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
&--primary {
|
|
background-color: var(--color-background-button-primary-default);
|
|
color: var(--color-text-button-primary);
|
|
|
|
&[data-focus-visible-added],
|
|
.tw-root--hover &:hover:not(.ffz-core-button--disabled) {
|
|
background-color: var(--color-background-button-primary-hover);
|
|
color: var(--color-text-button-primary);
|
|
}
|
|
|
|
&[data-focus-visible-added] {
|
|
box-shadow: var(--shadow-button-focus);
|
|
}
|
|
|
|
&:active:not(.ffz-core-button--disabled),
|
|
&:hover:active:not(.ffz-core-button--disabled) {
|
|
background-color: var(--color-background-button-primary-active);
|
|
color: var(--color-text-button-primary);
|
|
}
|
|
|
|
&.ffz-core-button--disabled {
|
|
background-color: var(--color-background-button-disabled);
|
|
color: var(--color-text-button-disabled);
|
|
}
|
|
|
|
&.ffz-core-button--overlay {
|
|
background-color: var(--color-background-button-overlay-primary-default);
|
|
color: var(--color-text-button-overlay-primary);
|
|
|
|
&[data-focus-visible-added],
|
|
.tw-root--hover &:hover:not(.ffz-core-button--disabled) {
|
|
background-color: var(--color-background-button-overlay-primary-hover);
|
|
color: var(--color-text-button-overlay-primary);
|
|
}
|
|
|
|
&[data-focus-visible-added] {
|
|
box-shadow: var(--shadow-button-overlay-focus);
|
|
}
|
|
|
|
&:active:not(.ffz-core-button--disabled),
|
|
&:hover:active:not(.ffz-core-button--disabled) {
|
|
background-color: var(--color-background-button-overlay-primary-active);
|
|
box-shadow: var(--shadow-button-overlay-active);
|
|
color: var(--color-text-button-overlay-primary);
|
|
}
|
|
}
|
|
}
|
|
|
|
&--secondary {
|
|
background-color: var(--color-background-button-secondary-default);
|
|
color: var(--color-text-button-secondary);
|
|
|
|
&[data-focus-visible-added],
|
|
.tw-root--hover &:hover:not(.ffz-core-button--disabled) {
|
|
background-color: var(--color-background-button-secondary-hover);
|
|
color: var(--color-text-button-secondary);
|
|
}
|
|
|
|
&[data-focus-visible-added] {
|
|
box-shadow: var(--shadow-button-focus);
|
|
}
|
|
|
|
&:active:not(.ffz-core-button--disabled),
|
|
&:hover:active:not(.ffz-core-button--disabled) {
|
|
background-color: var(--color-background-button-secondary-active);
|
|
color: var(--color-text-button-secondary);
|
|
}
|
|
|
|
&.ffz-core-button--disabled {
|
|
background-color: var(--color-background-button-disabled);
|
|
color: var(--color-text-button-disabled);
|
|
}
|
|
|
|
&.ffz-core-button--overlay {
|
|
background-color: var(--color-background-button-overlay-secondary-default);
|
|
color: var(--color-text-button-overlay-secondary);
|
|
|
|
&[data-focus-visible-added],
|
|
.tw-root--hover &:hover:not(.ffz-core-button--disabled) {
|
|
background-color: var(--color-background-button-overlay-secondary-hover);
|
|
color: var(--color-text-button-overlay-secondary);
|
|
}
|
|
|
|
&[data-focus-visible-added] {
|
|
box-shadow: var(--shadow-button-overlay-focus);
|
|
}
|
|
|
|
&:active:not(.ffz-core-button--disabled),
|
|
&:hover:active:not(.ffz-core-button--disabled) {
|
|
background-color: var(--color-background-button-overlay-secondary-active);
|
|
box-shadow: var(--shadow-button-overlay-active);
|
|
color: var(--color-text-button-overlay-secondary);
|
|
}
|
|
}
|
|
}
|
|
|
|
&--text {
|
|
background-color: var(--color-background-button-text-default);
|
|
color: var(--color-text-button-text);
|
|
|
|
&[data-focus-visible-added],
|
|
.tw-root--hover &:hover:not(.ffz-core-button--disabled) {
|
|
background-color: var(--color-background-button-text-hover);
|
|
color: var(--color-text-button-text);
|
|
}
|
|
|
|
&[data-focus-visible-added] {
|
|
box-shadow: var(--shadow-button-focus);
|
|
}
|
|
|
|
&:active:not(.ffz-core-button--disabled),
|
|
&:hover:active:not(.ffz-core-button--disabled) {
|
|
background-color: var(--color-background-button-text-active);
|
|
box-shadow: var(--shadow-button-active);
|
|
color: var(--color-text-button-text);
|
|
}
|
|
|
|
&.ffz-core-button--disabled {
|
|
background-color: var(--color-background-button-disabled);
|
|
color: var(--color-text-button-disabled);
|
|
}
|
|
|
|
&.ffz-core-button--overlay {
|
|
background-color: var(--color-background-button-overlay-text-default);
|
|
color: var(--color-text-button-overlay-text);
|
|
|
|
&[data-focus-visible-added],
|
|
.tw-root--hover &:hover:not(.ffz-core-button--disabled) {
|
|
background-color: var(--color-background-button-overlay-text-hover);
|
|
color: var(--color-text-button-overlay-text);
|
|
}
|
|
|
|
&[data-focus-visible-added] {
|
|
box-shadow: var(--shadow-button-overlay-focus);
|
|
}
|
|
|
|
&:active:not(.ffz-core-button--disabled),
|
|
&:hover:active:not(.ffz-core-button--disabled) {
|
|
background-color: var(--color-background-button-overlay-text-active);
|
|
box-shadow: var(--shadow-button-overlay-active);
|
|
color: var(--color-text-button-overlay-text);
|
|
}
|
|
}
|
|
}
|
|
|
|
&--destructive {
|
|
background-color: var(--color-background-button-destructive-default);
|
|
color: var(--color-text-button-destructive);
|
|
|
|
&[data-focus-visible-added],
|
|
.tw-root--hover &:hover:not(.ffz-core-button--disabled) {
|
|
background-color: var(--color-background-interactable-destructive-hover);
|
|
color: var(--color-text-button-destructive);
|
|
}
|
|
|
|
&[data-focus-visible-added] {
|
|
box-shadow: var(--shadow-button-focus);
|
|
}
|
|
|
|
&:active:not(.ffz-core-button--disabled),
|
|
&:hover:active:not(.ffz-core-button--disabled) {
|
|
background-color: var(--color-background-interactable-destructive-active);
|
|
box-shadow: var(--shadow-button-active);
|
|
color: var(--color-text-button-destructive)
|
|
}
|
|
|
|
&.ffz-core-button--disabled {
|
|
background-color: var(--color-background-button-disabled);
|
|
color: var(--color-text-button-disabled);
|
|
}
|
|
|
|
&.ffz-core-button--overlay.ffz-core-button--disabled {
|
|
background-color: var(--color-background-button-overlay-primary-default);
|
|
color: var(--color-text-button-overlay-primary);
|
|
}
|
|
}
|
|
|
|
|
|
&-label {
|
|
padding: 0 var(--button-padding-x);
|
|
}
|
|
|
|
&-label--icon {
|
|
padding-left: calc(var(--button-padding-x) - .2rem);
|
|
}
|
|
|
|
&-label--dropdown {
|
|
padding-right: calc(var(--button-padding-x) - .2rem);
|
|
}
|
|
|
|
&-icon { width: 2rem }
|
|
&-icon--small { width: 1.6rem }
|
|
&-icon--large { width: 2.4rem }
|
|
} |