mirror of
https://github.com/FrankerFaceZ/FrankerFaceZ.git
synced 2025-07-28 13:38:30 +00:00
fd0361b6e0
* Fixed: Setting to display square avatars not functioning. (Closes #1042) * Fixed: Chat message backgrounds on clips pages not appearing as full width. * Fixed: Style of the Gain Control input element. * Fixed: Shortcuts not being appended to live channel pages next to the channel name. * Fixed: The Mod View button not being hidden correctly. (Closes #1044) * Fixed: The "Hide Stream Info" button not being hidden in mod view. * Fixed: The setting to use the FFZ logo for the emote menu button not functioning. * Fixed: Multiple issues with portrait mode appearing incorrectly. * Fixed: Block and Hide Thumbnails buttons not appearing on game directory pages.
162 lines
No EOL
3.5 KiB
SCSS
162 lines
No EOL
3.5 KiB
SCSS
.ffz-range {
|
|
appearance: none;
|
|
cursor: pointer;
|
|
height: 1.6rem;
|
|
vertical-align: middle;
|
|
width: 100%;
|
|
|
|
&, &:active, &:hover, &:focus {
|
|
background: transparent;
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
&:disabled,
|
|
&:disabled + &__fill {
|
|
opacity: 0.5;
|
|
pointer-events: none;
|
|
}
|
|
|
|
&::-moz-range-track {
|
|
cursor: pointer;
|
|
height: .2rem;
|
|
width: 100%;
|
|
}
|
|
&::-ms-track {
|
|
cursor: pointer;
|
|
height: .2rem;
|
|
width: 100%;
|
|
}
|
|
&::-webkit-slider-runnable-track {
|
|
cursor: pointer;
|
|
height: .2rem;
|
|
width: 100%;
|
|
}
|
|
|
|
&::-moz-range-thumb {
|
|
appearance: none;
|
|
background: var(--color-white);
|
|
border: var(--border-width-default) solid var(--color-border-range-handle);
|
|
border-radius: var(--border-radius-rounded);
|
|
box-shadow: var(--shadow-elevation-1);
|
|
height: 1.6rem;
|
|
margin-top: -.7rem;
|
|
width: 1.6rem;
|
|
}
|
|
&::-ms-thumb {
|
|
appearance: none;
|
|
background: var(--color-white);
|
|
border: var(--border-width-default) solid var(--color-border-range-handle);
|
|
border-radius: var(--border-radius-rounded);
|
|
box-shadow: var(--shadow-elevation-1);
|
|
height: 1.6rem;
|
|
margin-top: -.7rem;
|
|
width: 1.6rem;
|
|
}
|
|
&::-webkit-slider-thumb {
|
|
appearance: none;
|
|
background: var(--color-white);
|
|
border: var(--border-width-default) solid var(--color-border-range-handle);
|
|
border-radius: var(--border-radius-rounded);
|
|
box-shadow: var(--shadow-elevation-1);
|
|
height: 1.6rem;
|
|
margin-top: -.7rem;
|
|
width: 1.6rem;
|
|
}
|
|
|
|
&[data-focus-visible-added] {
|
|
outline: none;
|
|
|
|
&::-moz-range-thumb {
|
|
border: var(--border-width-default) solid var(--color-background-range-fill);
|
|
}
|
|
&::-ms-thumb {
|
|
border: var(--border-width-default) solid var(--color-background-range-fill);
|
|
}
|
|
&::-webkit-slider-thumb {
|
|
border: var(--border-width-default) solid var(--color-background-range-fill);
|
|
}
|
|
}
|
|
|
|
&--error {
|
|
&::-moz-range-thumb {
|
|
border: var(--border-width-default) solid var(--color-border-input-error);
|
|
}
|
|
&::-ms-thumb {
|
|
border: var(--border-width-default) solid var(--color-border-input-error);
|
|
}
|
|
&::-webkit-slider-thumb {
|
|
border: var(--border-width-default) solid var(--color-border-input-error);
|
|
}
|
|
}
|
|
|
|
&--unfilled {
|
|
&::-moz-range-track {
|
|
background-color: var(--color-background-range);
|
|
}
|
|
&::-ms-track {
|
|
background-color: var(--color-background-range);
|
|
}
|
|
&::-webkit-slider-runnable-track {
|
|
background-color: var(--color-background-range);
|
|
}
|
|
}
|
|
|
|
&--unfilled.ffz-range-overlay {
|
|
&::-moz-range-track {
|
|
background-color: var(--color-background-range-overlay);
|
|
}
|
|
&::-ms-track {
|
|
background-color: var(--color-background-range-overlay);
|
|
}
|
|
&::-webkit-slider-runnable-track {
|
|
background-color: var(--color-background-range-overlay);
|
|
}
|
|
}
|
|
|
|
&--unfilled,
|
|
&--unfilled.ffz-range--overlay {
|
|
&::-moz-range-track {
|
|
border-radius: var(--border-radius-large);
|
|
cursor: pointer;
|
|
height: .2rem;
|
|
width: 100%;
|
|
}
|
|
&::-ms-track {
|
|
border-radius: var(--border-radius-large);
|
|
cursor: pointer;
|
|
height: .2rem;
|
|
width: 100%;
|
|
}
|
|
&::-webkit-slider-runnable-track {
|
|
border-radius: var(--border-radius-large);
|
|
cursor: pointer;
|
|
height: .2rem;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
&__fill {
|
|
height: 100%;
|
|
|
|
&-container {
|
|
background-color: var(--color-background-range);
|
|
cursor: pointer;
|
|
height: .2rem;
|
|
width: 100%;
|
|
}
|
|
|
|
&-value {
|
|
background-color: var(--color-background-range-fill);
|
|
height: 100%;
|
|
}
|
|
|
|
&--overlay &-container {
|
|
background-color: var(--color-background-range-overlay);
|
|
}
|
|
|
|
&--overlay &-value {
|
|
background-color: var(--color-background-range-overlay-fill);
|
|
}
|
|
}
|
|
} |