diff --git a/src/components/_chat.scss b/src/components/_chat.scss index ce61541..fce4ab8 100644 --- a/src/components/_chat.scss +++ b/src/components/_chat.scss @@ -140,6 +140,20 @@ main[class^="chatContent"] div[id^="message-content"] svg[class^="icon"] { } } +@mixin header-list($bgc) { + h1, + h2, + h3, + h4, + h5, + ul li, + ol li { + & > span { + background-color: $bgc; + } + } +} + // spoiler messages .theme-dark, .theme-light { @@ -157,15 +171,16 @@ main[class^="chatContent"] div[id^="message-content"] svg[class^="icon"] { } span[class*="spoilerMarkdownContent"] { - h1 > span { - background-color: $surface0; - } + @include header-list($surface0); + //background-color: $surface0; - &[class*="hidden"] h1 > span { - background-color: $surface2; + &[class*="hidden"] { + //background-color: $surface2; + @include header-list($surface2); &:hover { - background-color: lighten($surface2, 5%); + //background-color: lighten($surface2, 5%); + @include header-list(lighten($surface2, 5%)); } } } diff --git a/src/components/_details.scss b/src/components/_details.scss index a53ff2c..3d5f544 100644 --- a/src/components/_details.scss +++ b/src/components/_details.scss @@ -35,6 +35,7 @@ rect[fill="rgba(242, 63, 67, 1)"] { // offline rect[fill="#82858f"], +rect[fill="#80848e"], foreignObject[mask="url(#svg-mask-status-offline)"] > div, foreignObject[mask="url(#svg-mask-status-offline)"] > rect, div[class^="dotOffline"], diff --git a/src/components/_popouts.scss b/src/components/_popouts.scss index 71f25da..67f5d6f 100644 --- a/src/components/_popouts.scss +++ b/src/components/_popouts.scss @@ -247,9 +247,12 @@ section[class*="positionContainer_"] { } } -// Latte text color on gif categories -.theme-light section[class^="positionContainer"] div[class^="categoryText"] { - color: $base; +// Latte gif picker +.theme-light #gif-picker-tab-panel { + background-color: unset; + div[class^="categoryText"] { + color: $base; + } } #emoji-picker-tab-panel { @@ -796,3 +799,14 @@ div[class^="layerContainer"] div[class^="streamPreview"] div[class^="body"] { } } } + +// Event popout +div[class^="layerContainer"] div[class^="eventStatusContainer"] { + div[class^="newBadge"] { + background-color: $brand !important; + + div[class*="newBadgeText_"] { + color: $crust; + } + } +} diff --git a/src/components/_variables.scss b/src/components/_variables.scss index 1a0ed62..f39028e 100644 --- a/src/components/_variables.scss +++ b/src/components/_variables.scss @@ -138,6 +138,7 @@ html { --primary-300: #{$subtext1}; --primary-400: #{$subtext1}; --primary-dark-700: #{$crust}; + --primary-800: #{$crust}; // update discord icon --status-green-560: #{$green};