mirror of
https://github.com/FrankerFaceZ/FrankerFaceZ.git
synced 2025-07-25 03:58:30 +00:00
077a0685ad
* Added: Helper text to `Appearance > Theme` with suggested colors, as well as the previous site fonts. * Changed: Automatically enable or disable Twitch's Dark Theme when setting a background color, to ensure page elements stay styled correctly. * Changed: Don't try injecting our script on `brand` or `dev` subdomains. * Changed: Do not allow setting the alpha value of custom background colors. * Fixed: Add relative positioning to most of our tool-tip wrapper elements, to ensure tool-tips are positioned correctly. * Fixed: Stop modifying queries with Apollo. Just send our own queries when we need a bit of extra data. Should prevent loading issues. * Fixed: Option to hide the Discover link in the top navigation not working. * Fixed: Option to hide live indicators on channel cards not working. * Fixed: Add a few more rules to the new theme to ensure all elements are colored correctly. * Fixed: Do not square avatars within the Bits Leaderboard. * Known Issue: Light custom themes do not look good in Theater Mode.
131 lines
No EOL
2.6 KiB
SCSS
131 lines
No EOL
2.6 KiB
SCSS
/*$color: #dad8de;
|
|
$bg-color: #17141f;
|
|
$border-color: #2c2541;
|
|
|
|
$input-color: #faf9fa;
|
|
$input-bg: #0e0c13;
|
|
$input-border: #392e5c;
|
|
$input-active-border: #7d5bbe;
|
|
|
|
|
|
|
|
.tw-root--theme-dark {
|
|
.vc-sketch {
|
|
background: $bg-color;
|
|
box-shadow: 0 0 0 1px $border-color,
|
|
0 8px 16px rgba($border-color, .15);
|
|
}
|
|
|
|
.vc-sketch-active-color {
|
|
box-shadow: inset 0 0 0 1px $border-color,
|
|
inset 0 0 4px rgba($border-color, .25);
|
|
}
|
|
|
|
.vc-sketch-field {
|
|
.vc-input__input {
|
|
background: $input-bg;
|
|
color: $input-color;
|
|
box-shadow: inset 0 0 0 1px $input-border;
|
|
|
|
&:focus {
|
|
box-shadow: inset 0 0 0 1px $input-active-border,
|
|
0 0 6px -2px $input-active-border;
|
|
}
|
|
}
|
|
|
|
.vc-input__label {
|
|
color: $color;
|
|
}
|
|
}
|
|
|
|
.vc-sketch-presets {
|
|
border-top-color: $border-color;
|
|
}
|
|
|
|
.vc-sketch-presets-color {
|
|
box-shadow: inset 0 0 0 1px $border-color;
|
|
}
|
|
}
|
|
|
|
|
|
$color: var(--ffz-color-1);
|
|
$bg-color: var(--ffz-color-21);
|
|
$border-color: var(--ffz-color-20);
|
|
|
|
$input-color: var(--ffz-color-23);
|
|
$input-bg: var(--ffz-color-27);
|
|
$input-border: var(--ffz-color-26);
|
|
$input-active-border: var(--ffz-color-5);
|
|
|
|
|
|
.tw-root--theme-dark.tw-root--theme-ffz {
|
|
.vc-sketch {
|
|
background: $bg-color;
|
|
box-shadow: 0 0 0 1px $border-color,
|
|
0 8px 16px var(--ffz-color-37);
|
|
}
|
|
|
|
.vc-sketch-active-color {
|
|
box-shadow: inset 0 0 0 1px $border-color,
|
|
inset 0 0 4px var(--ffz-color-37);
|
|
}
|
|
|
|
.vc-sketch-field {
|
|
.vc-input__input {
|
|
background: $input-bg;
|
|
color: $input-color;
|
|
box-shadow: inset 0 0 0 1px $input-border;
|
|
|
|
&:focus {
|
|
box-shadow: inset 0 0 0 1px $input-active-border,
|
|
0 0 6px -2px $input-active-border;
|
|
}
|
|
}
|
|
|
|
.vc-input__label {
|
|
color: $color;
|
|
}
|
|
}
|
|
|
|
.vc-sketch-presets {
|
|
border-top-color: $border-color;
|
|
}
|
|
|
|
.vc-sketch-presets-color {
|
|
box-shadow: inset 0 0 0 1px $border-color;
|
|
}
|
|
}*/
|
|
|
|
.vc-sketch {
|
|
background-color: var(--color-background-body) !important;
|
|
box-shadow: 0 0 0 1px var(--color-border-base) !important;
|
|
}
|
|
|
|
.vc-sketch-active-color {
|
|
box-shadow: inset 0 0 0 1px var(--color-border-base) !important;
|
|
}
|
|
|
|
.vc-sketch-field {
|
|
.vc-input__input {
|
|
background-color: var(--color-background-input) !important;
|
|
color: var(--color-text-input) !important;
|
|
box-shadow: inset 0 0 0 1px var(--color-border-input) !important;
|
|
|
|
&:focus {
|
|
box-shadow: inset 0 0 0 1px var(--color-border-input-focus),
|
|
0 0 6px -2px var(--color-border-input-focus) !important;
|
|
}
|
|
}
|
|
|
|
.vc-input__label {
|
|
color: var(--color-text-label) !important;
|
|
}
|
|
}
|
|
|
|
.vc-sketch-presets {
|
|
border-top-color: var(--color-border-base) !important;
|
|
}
|
|
|
|
.vc-sketch-presets-color {
|
|
box-shadow: inset 0 0 0 1px var(--color-border-base) !important;
|
|
} |