mirror of
https://github.com/FrankerFaceZ/FrankerFaceZ.git
synced 2025-09-09 06:40:57 +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:
SirStendec
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 }
|
||||
}
|
||||
15
styles/native/card.scss
Normal file
15
styles/native/card.scss
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
.ffz-card-img {
|
||||
background-color: var(--color-background-placeholder);;
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
|
||||
&--size-2 { width: 2rem }
|
||||
&--size-3 { width: 3rem }
|
||||
&--size-4 { width: 4rem }
|
||||
&--size-6 { width: 6rem }
|
||||
&--size-8 { width: 8rem }
|
||||
&--size-12 { width: 12rem }
|
||||
&--size-16 { width: 16rem }
|
||||
&--size-24 { width: 24rem }
|
||||
&--size-32 { width: 32rem }
|
||||
}
|
||||
268
styles/native/checkbox.scss
Normal file
268
styles/native/checkbox.scss
Normal file
|
|
@ -0,0 +1,268 @@
|
|||
.ffz-checkbox .ffz-checkbox__label:before,
|
||||
.ffz-radio__label:before {
|
||||
background-clip: padding-box;
|
||||
box-sizing: border-box;
|
||||
content: "";
|
||||
height: 1.6rem;
|
||||
margin-top: -.8rem;
|
||||
transition: box-shadow .1s ease-in, background .1s ease-in;
|
||||
width: 1.6rem;
|
||||
}
|
||||
|
||||
.ffz-checkbox__input,
|
||||
.ffz-radio__input {
|
||||
clip: rect(0 0 0 0);
|
||||
height: .1rem;
|
||||
margin: -.1rem;
|
||||
overflow: hidden;
|
||||
width: .1rem;
|
||||
}
|
||||
|
||||
.ffz-checkbox__input {
|
||||
border: none;
|
||||
color: var(--color-text-label);
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
|
||||
&:hover:checked,
|
||||
&:hover:indeterminate {
|
||||
& + .ffz-checkbox__label:before {
|
||||
border: var(--border-width-input) solid var(--color-border-input-checkbox-checked);
|
||||
}
|
||||
}
|
||||
|
||||
&:checked,
|
||||
&:indeterminate {
|
||||
& + .ffz-checkbox__label {
|
||||
&:before {
|
||||
background-color: var(--color-background-input-checkbox-checked-background);
|
||||
border: var(--border-width-input) solid var(--color-border-input-checkbox-checked);
|
||||
}
|
||||
|
||||
&:after {
|
||||
background-color: var(--color-background-input-checkbox-checked);
|
||||
content: "";
|
||||
left: .4rem;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: .8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:checked + .ffz-checkbox__label:after {
|
||||
height: .8rem;
|
||||
transform: translate3d(0, -50%, 0);
|
||||
}
|
||||
|
||||
&:indeterminate + .ffz-checkbox__label:after {
|
||||
display: block;
|
||||
height: .2rem;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
&:disabled + .ffz-checkbox__label {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.js-focus-visible &:focus:not([data-focus-visible-added]) + .ffz-checkbox__label {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&[data-focus-visible-added] + .ffz-checkbox__label:before {
|
||||
border: var(--border-width-input) solid var(--color-border-input-checkbox-focus);
|
||||
box-shadow: var(--shadow-input-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.ffz-checkbox {
|
||||
.ffz-checkbox__label {
|
||||
border-radius: var(--border-radius-medium);
|
||||
color: var(--color-text-label);
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
padding: 0 0 0 1.6rem;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
border: var(--border-width-input) solid var(--color-border-input-checkbox);
|
||||
border-radius: .2rem;
|
||||
border-radius: var(--border-radius-small);
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:hover:before {
|
||||
border-color: var(--color-border-input-checkbox-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ffz-checkbox--error .ffz-checkbox__label:before {
|
||||
border: var(--border-width-input) solid var(--color-border-input-checkbox-error);
|
||||
}
|
||||
|
||||
.ffz-checkbox--overlay {
|
||||
.ffz-checkbox__input {
|
||||
&:checked + .ffz-checkbox__label {
|
||||
&:before {
|
||||
background-color: var(--color-background-input-checkbox-checked-background-overlay);
|
||||
border: var(--border-width-input) solid var(--color-border-input-checkbox-checked-overlay);
|
||||
}
|
||||
|
||||
&:after {
|
||||
background-color: var(--color-background-input-checkbox-checked-overlay);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover:checked,
|
||||
&:indeterminate {
|
||||
& + .ffz-checkbox__label:before {
|
||||
border: var(--border-width-input) solid var(--color-border-input-checkbox-checked-overlay);
|
||||
}
|
||||
}
|
||||
|
||||
&:indeterminate + .ffz-checkbox__label {
|
||||
&:before {
|
||||
background-color: var(--color-background-input-checkbox-checked-background-overlay);
|
||||
border: var(--border-width-input) solid var(--color-border-input-checkbox-checked-overlay);
|
||||
}
|
||||
|
||||
&:after {
|
||||
background: var(--color-background-input-checkbox-checked-overlay);
|
||||
content: "";
|
||||
display: block;
|
||||
height: .2rem;
|
||||
left: .4rem;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: .8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.js-focus-visible &:focus:not([data-focus-visible-added]) + .ffz-checkbox__label {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&[data-focus-visible-added] + .ffz-checkbox__label:before {
|
||||
border: var(--border-width-input) solid var(--color-border-input-overlay-focus);
|
||||
box-shadow: 0 0 6px 0 var(--color-border-input-overlay-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.ffz-checkbox__label {
|
||||
color: var(--color-text-overlay);
|
||||
|
||||
&:before {
|
||||
background-color: var(--color-background-input-overlay);
|
||||
border: var(--border-width-input) solid var(--color-border-input-checkbox-overlay);
|
||||
}
|
||||
|
||||
&:hover:before {
|
||||
border-color: var(--color-border-input-checkbox-hover-overlay);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Radio
|
||||
|
||||
.ffz-radio__input {
|
||||
border: none;
|
||||
color: var(--color-text-label);
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
|
||||
&:checked + .ffz-radio__label:after {
|
||||
background-color: var(--color-background-input-checkbox-checked);
|
||||
border-radius: 50%;
|
||||
height: .8rem;
|
||||
left: .4rem;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate3d(0, -50%, 0);
|
||||
width: .8rem;
|
||||
}
|
||||
|
||||
&:disabled + .ffz-radio__label {
|
||||
opacity: .5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.js-focus-visible &:focus:not([data-focus-visible-added]) + .ffz-radio__label {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&[data-focus-visible-added] + .ffz-radio__label:before {
|
||||
border: var(--border-width-input) solid var(--color-border-input-checkbox-focus);
|
||||
box-shadow: var(--shadow-input-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.ffz-radio__label {
|
||||
border-radius: var(--border-radius-medium);
|
||||
color: var(--color-text-label);
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
padding: 0 0 0 1.6rem;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
border: var(--border-width-input) solid var(--color-border-input-checkbox);
|
||||
border-radius: 50%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
&:after {
|
||||
background-color: var(--color-background-input);
|
||||
content: "";
|
||||
display: block;
|
||||
transition: background .1s ease-in;
|
||||
}
|
||||
|
||||
&:hover:before {
|
||||
border-color: var(--color-border-input-checkbox-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.ffz-radio--error .ffz-radio__label:before {
|
||||
border: var(--border-width-input) solid var(--color-border-input-checkbox-error);
|
||||
}
|
||||
|
||||
// TODO: radio overlay
|
||||
|
||||
|
||||
// Selection Stuff
|
||||
|
||||
@media (-webkit-min-device-pixel-ratio: 0) {
|
||||
.ffz-checkbox--overlay .ffz-checkbox__input:focus+.ffz-checkbox__label:before,
|
||||
.ffz-checkbox__input:focus+.ffz-checkbox__label,
|
||||
.ffz-radio--overlay .ffz-radio__input:focus+.ffz-radio__label:before,
|
||||
.ffz-radio__input:focus+.ffz-radio__label,
|
||||
.ffz-segmented-button-option__input--checkbox:focus+.ffz-segmented-button-option__label,
|
||||
.ffz-segmented-button-option__input--radio:focus+.ffz-segmented-button-option__label,
|
||||
.ffz-toggle__input:focus+.ffz-toggle__button {
|
||||
outline-color: -webkit-focus-ring-color;
|
||||
outline-style: auto
|
||||
}
|
||||
}
|
||||
|
||||
.ffz-checkbox--overlay .ffz-checkbox__input:focus+.ffz-checkbox__label:before,
|
||||
.ffz-checkbox__input:focus+.ffz-checkbox__label,
|
||||
.ffz-radio--overlay .ffz-radio__input:focus+.ffz-radio__label:before,
|
||||
.ffz-radio__input:focus+.ffz-radio__label,
|
||||
.ffz-segmented-button-option__input--checkbox:focus+.ffz-segmented-button-option__label,
|
||||
.ffz-segmented-button-option__input--radio:focus+.ffz-segmented-button-option__label,
|
||||
.ffz-toggle__input:focus+.ffz-toggle__button {
|
||||
outline: 5px solid Highlight;
|
||||
}
|
||||
7
styles/native/index.scss
Normal file
7
styles/native/index.scss
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
@import "button";
|
||||
@import "checkbox";
|
||||
@import "interactable";
|
||||
@import "text";
|
||||
@import "link";
|
||||
@import "card";
|
||||
@import "tag";
|
||||
115
styles/native/interactable.scss
Normal file
115
styles/native/interactable.scss
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
.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
|
||||
}
|
||||
67
styles/native/link.scss
Normal file
67
styles/native/link.scss
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
.ffz-link {
|
||||
color: var(--color-text-link);
|
||||
text-decoration: none;
|
||||
|
||||
.tw-root--hover &:hover {
|
||||
color: var(--color-text-link-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:active { color: var(--color-text-link-active); }
|
||||
&[data-focus-visible-added], &:focus { color: var(--color-text-link-focus); }
|
||||
&:visited { color: var(--color-text-link-visited); }
|
||||
|
||||
&--overlay {
|
||||
color: var(--color-text-overlay-link);
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.tw-root--hover &:hover {
|
||||
color: var(--color-text-overlay-link-hover);
|
||||
}
|
||||
|
||||
&:active { color: var(--color-text-overlay-link-active) }
|
||||
&:focus, &[data-focus-visible-added] { color: var(--color-text-overlay-link-focus) }
|
||||
&:visited { color: var(--color-text-overlay-link-visited) }
|
||||
}
|
||||
|
||||
&--underline { text-decoration: underline; }
|
||||
|
||||
&--inherit {
|
||||
&, &:visited, &:focus, &[data-focus-visible-added], &:active {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.tw-root--hover &:hover {
|
||||
color: var(--color-text-link-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.tw-root--hover &--hover-color-inherit:hover {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.tw-root--hover &--hover-underline-none {
|
||||
&, &:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
&--button {
|
||||
&:active {
|
||||
outline: none
|
||||
}
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
opacity: .5;
|
||||
|
||||
.tw-root--hover &:hover {
|
||||
cursor: not-allowed;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
62
styles/native/tag.scss
Normal file
62
styles/native/tag.scss
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
.ffz-tag {
|
||||
background-color: var(--color-background-tag-default);
|
||||
border: var(--border-width-tag) solid transparent;
|
||||
color: var(--color-text-tag);
|
||||
height: 2rem;
|
||||
|
||||
&:not(:disabled) {
|
||||
&:focus, &[data-focus-visible-added] {
|
||||
background: var(--color-background-tag-hover);
|
||||
border: var(--border-width-tag) solid var(--color-border-input-focus);
|
||||
}
|
||||
|
||||
.tw-root--hover &:hover {
|
||||
background: var(--color-background-tag-hover);
|
||||
color: var(--color-text-tag);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(--color-background-tag-active);
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&__content {
|
||||
padding: 0 .8rem;
|
||||
|
||||
&--icon {
|
||||
padding-right: .4rem
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
height: 1.6rem;
|
||||
width: 1.6rem;
|
||||
}
|
||||
|
||||
&--overlay {
|
||||
background: rgba(0,0,0,0.3);
|
||||
border: var(--border-width-tag) solid var(--color-border-input-overlay);
|
||||
color: var(--color-text-overlay);
|
||||
|
||||
&:not(:disabled) {
|
||||
&:focus, &[data-focus-visible-added] {
|
||||
border: var(--border-width-tag) solid var(--color-border-input-overlay-focus);
|
||||
}
|
||||
|
||||
.tw-root--hover &:hover {
|
||||
background: var(--color-background-interactable-overlay-hover);
|
||||
color: var(--color-text-overlay);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(--color-background-interactable-overlay-active);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
240
styles/native/text.scss
Normal file
240
styles/native/text.scss
Normal file
|
|
@ -0,0 +1,240 @@
|
|||
/*
|
||||
* Extracted styles for Twitch-like input elements
|
||||
* because Twitch is stupid and removed their nice,
|
||||
* standardized classes with nice standardized names
|
||||
* in favor of procedural classes.
|
||||
*/
|
||||
|
||||
|
||||
// Input / Shared
|
||||
|
||||
.ffz-input {
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
border: var(--border-width-input) solid var(--color-border-input);
|
||||
color: var(--color-text-input);
|
||||
line-height: 1.5;
|
||||
|
||||
&[type=number] {
|
||||
-moz-appearance: textfield;
|
||||
|
||||
&::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
&::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ffz-form-tag, .ffz-input, .ffz-select, .ffz-select-button, .ffz-textarea {
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
.ffz-input, .ffz-select, .ffz-textarea {
|
||||
font-family: inherit;
|
||||
transition: box-shadow .1s ease-in, border .1s ease-in, background-color .1s ease-in;
|
||||
|
||||
//&::-webkit-input-placeholder,
|
||||
//&:-ms-input-placeholder,
|
||||
//&::-ms-input-placeholder,
|
||||
&::placeholder {
|
||||
color: var(--color-text-input-placeholder);
|
||||
}
|
||||
|
||||
&::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:-moz-focus-inner {
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&, &:hover {
|
||||
background-color: var(--color-background-input);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--color-border-input-hover);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&:focus, &:focus:hover {
|
||||
background-color: var(--color-background-input-focus);
|
||||
border: var(--border-width-input) solid var(--color-border-input-focus);
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ffz-input--error, .ffz-select--error {
|
||||
box-shadow: var(--shadow-input-error);
|
||||
|
||||
&, &:focus {
|
||||
border: var(--border-width-input) solid var(--color-border-input-error);
|
||||
}
|
||||
}
|
||||
|
||||
.ffz-input--error:focus,
|
||||
.ffz-select--error:focus {
|
||||
box-shadow: var(--shadow-input-error-focus);
|
||||
}
|
||||
|
||||
.ffz-input--overlay,
|
||||
.ffz-select--overlay,
|
||||
.ffz-textarea--overlay {
|
||||
background-color: var(--color-background-input-overlay);
|
||||
border: none;
|
||||
box-shadow: inset 0 0 0 var(--border-width-input) var(--color-border-input-overlay);
|
||||
color: var(--color-text-overlay);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-background-input-overlay);
|
||||
box-shadow: inset 0 0 0 var(--border-width-input) var(--color-border-input-overlay-hover);
|
||||
}
|
||||
|
||||
&:focus, &:focus:hover {
|
||||
background-color: var(--color-background-input-overlay-focus);
|
||||
border: none;
|
||||
box-shadow: inset 0 0 0 var(--border-width-input) var(--color-border-input-overlay-focus);
|
||||
}
|
||||
|
||||
//&::-webkit-input-placeholder,
|
||||
//&:-ms-input-placeholder,
|
||||
//&::-ms-input-placeholder,
|
||||
&::placeholder {
|
||||
color: var(--color-text-input-placeholder-overlay);
|
||||
}
|
||||
|
||||
&.ffz-input--error,
|
||||
&.ffz-select--error {
|
||||
border: var(--border-width-input) solid var(--color-border-input-error);
|
||||
box-shadow: var(--shadow-input-error);
|
||||
|
||||
&:focus {
|
||||
border: var(--border-width-input) solid var(--color-border-input-error);
|
||||
box-shadow: var(--shadow-input-error-focus);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ffz-input--password {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.ffz-input__icon {
|
||||
min-width: 3rem;
|
||||
}
|
||||
|
||||
.ffz-input__icon--overlay {
|
||||
color: var(--color-text-input-placeholder-overlay);
|
||||
}
|
||||
|
||||
.ffz-input--small,
|
||||
.ffz-select--small {
|
||||
height: 2.4rem;
|
||||
padding: .2rem 0
|
||||
}
|
||||
|
||||
.ffz-input, .ffz-select {
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
.ffz-input--large,
|
||||
.ffz-select--large {
|
||||
height: 3.6rem
|
||||
}
|
||||
|
||||
|
||||
// Select
|
||||
|
||||
.ffz-select {
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%230e0e10' d='M10.5 13.683l2.85-2.442 1.3 1.518-3.337 2.86a1.25 1.25 0 01-1.626 0l-3.338-2.86 1.302-1.518 2.849 2.442zm0-7.366L7.65 8.76l-1.3-1.518 3.337-2.86a1.25 1.25 0 011.627 0l3.337 2.86-1.302 1.518L10.5 6.317z'/%3E%3C/svg%3E");
|
||||
background-position: right .8rem center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 2rem;
|
||||
border: var(--border-width-input) solid var(--color-border-input);
|
||||
color: var(--color-text-input);
|
||||
cursor: pointer;
|
||||
line-height: 1.5;
|
||||
line-height: normal;
|
||||
|
||||
.tw-root--theme-dark & {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23efeff1' d='M10.5 13.683l2.85-2.442 1.3 1.518-3.337 2.86a1.25 1.25 0 01-1.626 0l-3.338-2.86 1.302-1.518 2.849 2.442zm0-7.366L7.65 8.76l-1.3-1.518 3.337-2.86a1.25 1.25 0 011.627 0l3.337 2.86-1.302 1.518L10.5 6.317z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
// option isn't scoped, unlike default Twitch, to avoid flicker
|
||||
&[data-focus-visible-added], option {
|
||||
background-color: var(--color-background-input-focus);
|
||||
border-color: var(--color-border-input-focus)
|
||||
}
|
||||
}
|
||||
|
||||
.ffz-select--overlay {
|
||||
&,
|
||||
.tw-root--theme-dark &,
|
||||
.tw-root--theme-light & {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M10.5 13.683l2.85-2.442 1.3 1.518-3.337 2.86a1.25 1.25 0 01-1.626 0l-3.338-2.86 1.302-1.518 2.849 2.442zm0-7.366L7.65 8.76l-1.3-1.518 3.337-2.86a1.25 1.25 0 011.627 0l3.337 2.86-1.302 1.518L10.5 6.317z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
&[data-focus-visible-added] {
|
||||
&, & option {
|
||||
background-color: var(--color-background-input-overlay-focus);
|
||||
box-shadow: inset 0 0 0 var(--border-width-input) var(--color-border-input-overlay-focus);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ffz-select--small {
|
||||
background-size: 1.6rem;
|
||||
}
|
||||
|
||||
.ffz-select--large {
|
||||
background-size: 2.4rem;
|
||||
}
|
||||
|
||||
|
||||
// Textarea
|
||||
|
||||
.ffz-textarea {
|
||||
-moz-appearance: none;
|
||||
-ms-overflow-style: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
border: var(--border-width-input) solid var(--color-border-input);
|
||||
color: var(--color-text-input);
|
||||
padding: .5rem 1rem;
|
||||
resize: vertical;
|
||||
|
||||
&[cols] {
|
||||
max-width: 100%;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
&--error {
|
||||
box-shadow: var(--shadow-input-error);
|
||||
|
||||
&,&:focus {
|
||||
border: var(--border-width-input) solid var(--color-border-input-error);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: var(--shadow-input-error-focus);
|
||||
}
|
||||
}
|
||||
|
||||
&--no-resize {
|
||||
resize: none;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue