mirror of
https://github.com/FrankerFaceZ/FrankerFaceZ.git
synced 2025-09-17 18:26:57 +00:00
4.12.1
* Added: Preview of new theming system with custom colors. * Changed: Start using the CSS color variables in more places. * Fixed: Alignment of metadata in theater mode. * Fixed: Custom chat font not applying to chat input. * Fixed: Do not attempt to fetch uptime when there is no channel ID. * Fixed: Hover state of emote menu section buttons. * Fixed: Re-add pill rendering for FFZ menu button.
This commit is contained in:
parent
2232934309
commit
a1949b0f8e
21 changed files with 451 additions and 266 deletions
|
@ -1,5 +1,5 @@
|
|||
.ffz--add-on-info {
|
||||
.ffz-logo-section {
|
||||
max-width: 8rem;
|
||||
}
|
||||
.ffz-logo-section {
|
||||
max-width: 8rem;
|
||||
}
|
||||
}
|
|
@ -1,8 +1,8 @@
|
|||
.tw-checkbox__input {
|
||||
&:indeterminate + .tw-checkbox__label {
|
||||
&:before {
|
||||
background: #7d5bbe;
|
||||
border: 1px solid #7d5bbe;
|
||||
background: var(--color-twitch-purple-8);
|
||||
border: 1px solid var(--color-twitch-purple-8);
|
||||
}
|
||||
|
||||
&:after {
|
||||
|
|
|
@ -18,10 +18,6 @@
|
|||
transform: translateY(-50%);
|
||||
padding: 0 0.5rem;
|
||||
|
||||
background-color: $bg-light;
|
||||
|
||||
.tw-root--theme-dark & {
|
||||
background-color: $bg-dark;
|
||||
}
|
||||
background-color: var(--color-background-alt);
|
||||
}
|
||||
}
|
|
@ -12,26 +12,21 @@
|
|||
content: '';
|
||||
pointer-events: none;
|
||||
|
||||
box-shadow: inset 0 0 0 1px #7d5bbe,
|
||||
0 0 6px -2px #7d5bbe;
|
||||
box-shadow: inset 0 0 0 1px var(--color-twitch-purple-8),
|
||||
0 0 6px -2px var(--color-twitch-purple-8);
|
||||
}
|
||||
}
|
||||
|
||||
.active > div,
|
||||
.active > div:hover,
|
||||
.tw-root--theme-dark & .active > div:hover {
|
||||
background-color: #6441a4;
|
||||
color: #fff;
|
||||
background-color: var(--color-background-button-primary-hover);
|
||||
color: var(--color-text-button-primary);
|
||||
}
|
||||
|
||||
div:hover {
|
||||
cursor: pointer;
|
||||
|
||||
background-color: #fff;
|
||||
|
||||
.tw-root--theme-dark & {
|
||||
background-color: #201c2b;
|
||||
}
|
||||
background-color: var(--color-background-button-text-hover);
|
||||
}
|
||||
|
||||
li div {
|
||||
|
|
|
@ -19,7 +19,7 @@
|
|||
border-left-color: transparent;
|
||||
|
||||
&.live .ffz--profile-row__icon {
|
||||
color: green;
|
||||
color: var(--color-green-darker);
|
||||
}
|
||||
|
||||
&:not(.live):not(:hover):not(:focus) {
|
||||
|
@ -32,7 +32,7 @@
|
|||
}
|
||||
|
||||
&.current {
|
||||
border-left-color: #6441a4;
|
||||
border-left-color: var(--color-twitch-purple-8);
|
||||
}
|
||||
|
||||
.description {
|
||||
|
@ -51,16 +51,16 @@
|
|||
|
||||
&:focus {
|
||||
box-shadow:
|
||||
inset 0 0 0 1px #7d5bbe,
|
||||
0 0 6px -2px #7d5bbe;
|
||||
inset 0 0 0 1px var(--color-twitch-purple-8),
|
||||
0 0 6px -2px var(--color-twitch-purple-8);
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background: rgba(100, 65, 164, .05);
|
||||
background: var(--color-opac-p-1);
|
||||
|
||||
.tw-root--theme-dark & {
|
||||
background: rgba(100, 65, 164, .2);
|
||||
background: var(--color-opac-p-4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -5,8 +5,8 @@
|
|||
outline: none;
|
||||
|
||||
.tab.active {
|
||||
box-shadow: inset 0 0 0 1px #7d5bbe,
|
||||
0 0 6px -2px #7d5bbe;
|
||||
box-shadow: inset 0 0 0 1px var(--color-twitch-purple-8),
|
||||
0 0 6px -2px var(--color-twitch-purple-8);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -30,7 +30,7 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
content: '';
|
||||
border-bottom: 4px solid #6441a4;
|
||||
border-bottom: 4px solid var(--color-twitch-purple-8);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue