1
0
Fork 0
mirror of https://github.com/FrankerFaceZ/FrankerFaceZ.git synced 2025-09-17 18:26:57 +00:00
* 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:
SirStendec 2019-09-26 20:34:37 -04:00
parent 2232934309
commit a1949b0f8e
21 changed files with 451 additions and 266 deletions

View file

@ -1,5 +1,5 @@
.ffz--add-on-info {
.ffz-logo-section {
max-width: 8rem;
}
.ffz-logo-section {
max-width: 8rem;
}
}

View file

@ -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 {

View file

@ -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);
}
}

View file

@ -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 {

View file

@ -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);
}
}
}

View file

@ -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);
}
}