mirror of
https://github.com/FrankerFaceZ/FrankerFaceZ.git
synced 2025-06-28 05:15:54 +00:00
115 lines
2.7 KiB
SCSS
115 lines
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
|
||
|
|
}
|