mirror of
https://github.com/FrankerFaceZ/FrankerFaceZ.git
synced 2025-07-27 21:18:30 +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.
115 lines
No EOL
2.7 KiB
SCSS
115 lines
No EOL
2.7 KiB
SCSS
.ffz-interactable {
|
|
color: inherit;
|
|
|
|
&:hover {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
&.ffz-interactable--hover-enabled:hover:active,
|
|
&:active {
|
|
background-color: var(--color-background-interactable-active);
|
|
}
|
|
|
|
&--selected, &:focus {
|
|
position: relative;
|
|
}
|
|
|
|
&--disabled, &:disabled {
|
|
opacity: 0.5;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
.ffz-interactable--default {
|
|
&.ffz-interactable--hover-forced,
|
|
&[data-focus-visible-added],
|
|
.tw-root--hover &.ffz-interactable--hover-enabled:hover {
|
|
background-color: var(--color-background-interactable-hover);
|
|
}
|
|
|
|
&.ffz-interactable--active,
|
|
&.ffz-interactable--hover-enabled:hover:active,
|
|
&:active {
|
|
background-color: var(--color-background-interactable-active);
|
|
}
|
|
|
|
&.ffz-interactable--selected {
|
|
color: var(--color-text-interactable-selected);
|
|
|
|
&,
|
|
&.ffz-interactable--hover-enabled:hover:active,
|
|
&.ffz-interactable--hover-forced,
|
|
&:active,
|
|
&[data-focus-visible-added],
|
|
.tw-root &.ffz-interactable--hover-enabled:hover {
|
|
background-color: var(--color-background-interactable-selected);
|
|
}
|
|
}
|
|
}
|
|
|
|
.ffz-interactable--alert {
|
|
&, &:hover {
|
|
color: var(--color-text-alert);
|
|
}
|
|
|
|
&.ffz-interactable--hover-forced,
|
|
&[data-focus-visible-added],
|
|
.tw-root--hover &.ffz-interactable--hover-enabled:hover {
|
|
background-color: var(--color-background-interactable-destructive-hover);
|
|
color: var(--color-text-interactable-inverted);
|
|
}
|
|
|
|
&.ffz-interactable--active,
|
|
&.ffz-interactable--hover-enabled:hover:active,
|
|
&:active {
|
|
background-color: var(--color-background-interactable-destructive-active);
|
|
}
|
|
}
|
|
|
|
.ffz-interactable--overlay {
|
|
background-color: transparent;
|
|
|
|
&.ffz-interactable--hover-forced,
|
|
&[data-focus-visible-added],
|
|
.tw-root--hover &.ffz-interactable--hover-enabled:hover {
|
|
background-color: var(--color-background-interactable-overlay-hover);
|
|
}
|
|
|
|
&.ffz-interactable--active,
|
|
&.ffz-interactable--hover-enabled:hover:active,
|
|
&:active {
|
|
background-color: var(--color-background-interactable-overlay-active);
|
|
}
|
|
|
|
&.ffz-interactable--selected {
|
|
color: var(--color-text-interactable-overlay-selected);
|
|
|
|
&,
|
|
&.ffz-interactable--hover-enabled:hover:active,
|
|
&.ffz-interactable--hover-forced,
|
|
&:active,
|
|
&[data-focus-visible-added],
|
|
.tw-root &.ffz-interactable--hover-enabled:hover {
|
|
background: var(--color-background-interactable-overlay-selected);
|
|
}
|
|
}
|
|
|
|
&.ffz-interactable--border {
|
|
border-color: var(--color-border-overlay);
|
|
}
|
|
}
|
|
|
|
.ffz-interactable--border {
|
|
border: var(--border-width-default) solid var(--color-border-base);
|
|
|
|
&.ffz-interactable--selected {
|
|
border: var(--border-width-default) solid var(--color-border-interactable-selected);
|
|
}
|
|
}
|
|
|
|
.ffz-interactable--selectable-text {
|
|
-ms-user-select: text;
|
|
-webkit-user-select: text;
|
|
user-select: text
|
|
} |