mirror of
https://github.com/FrankerFaceZ/FrankerFaceZ.git
synced 2025-06-28 05:15:54 +00:00
264c375f13
This was a small update until Twitch ripped out half their CSS. * Added: Cross-Origin Storage Bridge for settings, better synchronizing settings on sub-domains with support for binary blobs at the cost of slightly increased start-up time. * Fixed: Rendering issues caused by missing CSS. * Fixed: FFZ Control Center button not appearing on dashboard pages, and appearing in the incorrect place. * Changed: Work towards splitting modules into their own JS files for a faster, more asynchronous startup. * API Added: Methods for serializing and deserializing Blobs for transmission across postMessage.
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
|
|
} |