mirror of
https://github.com/FrankerFaceZ/FrankerFaceZ.git
synced 2025-09-15 17:46:55 +00:00
4.20.89
* 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.
This commit is contained in:
parent
fa33491eec
commit
ae90b8e4fe
35 changed files with 306 additions and 222 deletions
223
styles/native/button.scss
Normal file
223
styles/native/button.scss
Normal file
|
@ -0,0 +1,223 @@
|
|||
.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 }
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue