From a87c34866a3fa190587df6c8f8883cc2a4ed743a Mon Sep 17 00:00:00 2001 From: vyneer Date: Tue, 22 Oct 2024 18:27:39 +0300 Subject: [PATCH 01/16] refactor: reorganize css --- assets/chat/css/abstracts/_index.scss | 2 + assets/chat/css/abstracts/_mixins.scss | 11 + .../css/abstracts/_vars.scss} | 11 + assets/chat/css/chat/_autocomplete.scss | 57 + assets/chat/css/chat/_form-control.scss | 29 + assets/chat/css/chat/_index.scss | 24 + assets/chat/css/chat/_input.scss | 51 + assets/chat/css/chat/_loading-screen.scss | 31 + assets/chat/css/chat/_login-screen.scss | 26 + assets/chat/css/chat/_onstreamchat.scss | 202 ++ assets/chat/css/chat/_output.scss | 23 + assets/chat/css/chat/_scroll-notify.scss | 32 + assets/chat/css/chat/_scrollbar-theme.scss | 89 + assets/chat/css/chat/_settings.scss | 50 + assets/chat/css/chat/_toolbar.scss | 52 + assets/chat/css/chat/_window-select.scss | 77 + assets/chat/css/main.scss | 141 + assets/chat/css/menus/_emote-list.scss | 52 + assets/chat/css/menus/_emote-tooltip.scss | 61 + assets/chat/css/menus/_index.scss | 99 + assets/chat/css/menus/_poll.scss | 175 ++ assets/chat/css/menus/_settings.scss | 53 + assets/chat/css/menus/_user-info.scss | 97 + assets/chat/css/menus/_user-list.scss | 98 + assets/chat/css/menus/_whispers-list.scss | 78 + assets/chat/css/messages/_index.scss | 6 + assets/chat/css/messages/base/_censored.scss | 22 + assets/chat/css/messages/base/_continue.scss | 13 + assets/chat/css/messages/base/_highlight.scss | 15 + .../chat/css/messages/base/_historical.scss | 25 + assets/chat/css/messages/base/_index.scss | 94 + assets/chat/css/messages/base/_me.scss | 3 + assets/chat/css/messages/base/_own.scss | 6 + assets/chat/css/messages/base/_tagged.scss | 39 + assets/chat/css/messages/emote/_combo.scss | 176 ++ assets/chat/css/messages/emote/_index.scss | 8 + .../chat/css/messages/event/_broadcast.scss | 11 + assets/chat/css/messages/event/_donation.scss | 29 + assets/chat/css/messages/event/_index.scss | 84 + .../css/messages/event/_subscription.scss | 67 + assets/chat/css/messages/pinned/_frame.scss | 38 + assets/chat/css/messages/pinned/_index.scss | 51 + assets/chat/css/messages/ui/_command.scss | 5 + assets/chat/css/messages/ui/_error.scss | 5 + assets/chat/css/messages/ui/_index.scss | 25 + assets/chat/css/messages/ui/_info.scss | 9 + assets/chat/css/messages/ui/_status.scss | 5 + assets/chat/css/messages/user/_death.scss | 16 + assets/chat/css/messages/user/_index.scss | 18 + assets/chat/css/messages/user/_whisper.scss | 19 + assets/chat/css/partials/_button.scss | 29 + .../css/partials/_icon.scss} | 37 +- assets/chat/css/partials/_index.scss | 3 + assets/chat/css/partials/_tool-button.scss | 12 + assets/chat/css/style.scss | 2267 ----------------- assets/demo.js | 2 +- 56 files changed, 2468 insertions(+), 2292 deletions(-) create mode 100644 assets/chat/css/abstracts/_index.scss create mode 100644 assets/chat/css/abstracts/_mixins.scss rename assets/{common.scss => chat/css/abstracts/_vars.scss} (82%) create mode 100644 assets/chat/css/chat/_autocomplete.scss create mode 100644 assets/chat/css/chat/_form-control.scss create mode 100644 assets/chat/css/chat/_index.scss create mode 100644 assets/chat/css/chat/_input.scss create mode 100644 assets/chat/css/chat/_loading-screen.scss create mode 100644 assets/chat/css/chat/_login-screen.scss create mode 100644 assets/chat/css/chat/_onstreamchat.scss create mode 100644 assets/chat/css/chat/_output.scss create mode 100644 assets/chat/css/chat/_scroll-notify.scss create mode 100644 assets/chat/css/chat/_scrollbar-theme.scss create mode 100644 assets/chat/css/chat/_settings.scss create mode 100644 assets/chat/css/chat/_toolbar.scss create mode 100644 assets/chat/css/chat/_window-select.scss create mode 100644 assets/chat/css/main.scss create mode 100644 assets/chat/css/menus/_emote-list.scss create mode 100644 assets/chat/css/menus/_emote-tooltip.scss create mode 100644 assets/chat/css/menus/_index.scss create mode 100644 assets/chat/css/menus/_poll.scss create mode 100644 assets/chat/css/menus/_settings.scss create mode 100644 assets/chat/css/menus/_user-info.scss create mode 100644 assets/chat/css/menus/_user-list.scss create mode 100644 assets/chat/css/menus/_whispers-list.scss create mode 100644 assets/chat/css/messages/_index.scss create mode 100644 assets/chat/css/messages/base/_censored.scss create mode 100644 assets/chat/css/messages/base/_continue.scss create mode 100644 assets/chat/css/messages/base/_highlight.scss create mode 100644 assets/chat/css/messages/base/_historical.scss create mode 100644 assets/chat/css/messages/base/_index.scss create mode 100644 assets/chat/css/messages/base/_me.scss create mode 100644 assets/chat/css/messages/base/_own.scss create mode 100644 assets/chat/css/messages/base/_tagged.scss create mode 100644 assets/chat/css/messages/emote/_combo.scss create mode 100644 assets/chat/css/messages/emote/_index.scss create mode 100644 assets/chat/css/messages/event/_broadcast.scss create mode 100644 assets/chat/css/messages/event/_donation.scss create mode 100644 assets/chat/css/messages/event/_index.scss create mode 100644 assets/chat/css/messages/event/_subscription.scss create mode 100644 assets/chat/css/messages/pinned/_frame.scss create mode 100644 assets/chat/css/messages/pinned/_index.scss create mode 100644 assets/chat/css/messages/ui/_command.scss create mode 100644 assets/chat/css/messages/ui/_error.scss create mode 100644 assets/chat/css/messages/ui/_index.scss create mode 100644 assets/chat/css/messages/ui/_info.scss create mode 100644 assets/chat/css/messages/ui/_status.scss create mode 100644 assets/chat/css/messages/user/_death.scss create mode 100644 assets/chat/css/messages/user/_index.scss create mode 100644 assets/chat/css/messages/user/_whisper.scss create mode 100644 assets/chat/css/partials/_button.scss rename assets/{icons/icons.scss => chat/css/partials/_icon.scss} (56%) create mode 100644 assets/chat/css/partials/_index.scss create mode 100644 assets/chat/css/partials/_tool-button.scss delete mode 100644 assets/chat/css/style.scss diff --git a/assets/chat/css/abstracts/_index.scss b/assets/chat/css/abstracts/_index.scss new file mode 100644 index 00000000..ea152dc2 --- /dev/null +++ b/assets/chat/css/abstracts/_index.scss @@ -0,0 +1,2 @@ +@forward 'vars'; +@forward 'mixins'; diff --git a/assets/chat/css/abstracts/_mixins.scss b/assets/chat/css/abstracts/_mixins.scss new file mode 100644 index 00000000..ac0ab100 --- /dev/null +++ b/assets/chat/css/abstracts/_mixins.scss @@ -0,0 +1,11 @@ +@mixin icon-background($url) { + background: transparent url($url) no-repeat center center / contain; +} + +@mixin msg-icon($posX, $posY, $width: 16px, $height: 16px) { + background-image: url('../../icons/icons.png'); + background-repeat: no-repeat; + width: $width; + height: $height; + background-position: $posX $posY; +} diff --git a/assets/common.scss b/assets/chat/css/abstracts/_vars.scss similarity index 82% rename from assets/common.scss rename to assets/chat/css/abstracts/_vars.scss index 8f0995b5..0432800c 100644 --- a/assets/common.scss +++ b/assets/chat/css/abstracts/_vars.scss @@ -1,3 +1,14 @@ +$chat-chrome-font: 'Roboto', Helvetica, 'Trebuchet MS', Verdana, sans-serif; +$chat-lines-font: 'Roboto', Helvetica, 'Trebuchet MS', Verdana, sans-serif; +$chat-min-width: 300px; + +$gutter-xs: 0.2em; +$gutter-sm: 0.3em; +$gutter-md: 0.6em; +$gutter-lg: 0.9em; + +$bradius: 0.25em; + $color-light: #fff7f9; $color-dark: #201f1e; $color-accent: #4a8ecc; diff --git a/assets/chat/css/chat/_autocomplete.scss b/assets/chat/css/chat/_autocomplete.scss new file mode 100644 index 00000000..e4b4ae11 --- /dev/null +++ b/assets/chat/css/chat/_autocomplete.scss @@ -0,0 +1,57 @@ +@use '../abstracts/' as a; + +#chat-auto-complete { + pointer-events: none; + transition: opacity 750ms; + transition-timing-function: cubic-bezier(0, 0.74, 0.1, 0.99); + opacity: 0; + z-index: 131; + border-radius: a.$bradius a.$bradius 0 0; + position: absolute; + font-size: 1.1em; + line-height: 2em; + height: 2em; + top: -2em; + left: 0; + right: 0; + overflow: hidden; + white-space: nowrap; + + &.active { + opacity: 1; + pointer-events: auto; + } + + ul { + position: absolute; + white-space: nowrap; + list-style: none; + padding: 0; + margin: 0; + } + + li { + padding: 0 a.$gutter-sm; + cursor: pointer; + text-decoration: none; + display: inline-block; + color: a.$color-chat-text3; + background: rgba(a.$color-surface-dark1, 0.75); + + &:first-child { + border-radius: a.$bradius 0 0 0; + } + + &:last-child { + border-radius: 0 a.$bradius 0 0; + } + + &:hover { + color: lighten(a.$color-chat-text3, 20); + } + + &.active { + color: a.$text-color; + } + } +} diff --git a/assets/chat/css/chat/_form-control.scss b/assets/chat/css/chat/_form-control.scss new file mode 100644 index 00000000..29c1282e --- /dev/null +++ b/assets/chat/css/chat/_form-control.scss @@ -0,0 +1,29 @@ +@use '../abstracts/' as a; + +.form-control { + color: a.$color-chat-text2; + background: a.$color-surface-dark1; + border: 1px solid lighten(a.$color-surface-dark1, 9); + + &:focus { + color: a.$color-chat-text1; + background: a.$color-surface-dark1; + border: 1px solid lighten(a.$color-surface-dark1, 15); + box-shadow: none; + outline: none; + } + + &[disabled], + &[readonly], + &::placeholder { + color: a.$color-chat-place; + } + + &[type='text'] { + width: 100%; + } +} + +textarea.form-control { + width: 100%; +} diff --git a/assets/chat/css/chat/_index.scss b/assets/chat/css/chat/_index.scss new file mode 100644 index 00000000..c4e5f09d --- /dev/null +++ b/assets/chat/css/chat/_index.scss @@ -0,0 +1,24 @@ +@use '../abstracts/' as a; + +@use 'autocomplete'; +@use 'form-control'; +@use 'input'; +@use 'loading-screen'; +@use 'login-screen'; +@use 'onstreamchat'; +@use 'output'; +@use 'scroll-notify'; +@use 'scrollbar-theme'; +@use 'settings'; +@use 'toolbar'; +@use 'window-select'; + +#chat { + min-width: a.$chat-min-width; + display: flex; + flex-direction: column; + position: relative; + width: 100%; + height: 100%; + overflow: hidden; +} diff --git a/assets/chat/css/chat/_input.scss b/assets/chat/css/chat/_input.scss new file mode 100644 index 00000000..b04161c3 --- /dev/null +++ b/assets/chat/css/chat/_input.scss @@ -0,0 +1,51 @@ +@use '../abstracts/' as a; + +#chat-input-frame { + padding: a.$gutter-md a.$gutter-md 0 a.$gutter-md; +} + +#chat-input-wrap { + position: relative; +} + +#chat-input-control { + max-height: 140px; + position: relative; + color: a.$color-chat-text2; + background: a.$color-surface-dark2; + border: 1px solid a.$color-surface-dark3; + outline: none; + resize: none; + margin: 0; + width: 100%; + padding: a.$gutter-md; + border-radius: a.$bradius; + box-shadow: none; + box-sizing: border-box; + display: block; + overflow: hidden; + + &::placeholder { + color: a.$color-chat-place; + } + + #chat.chat-autocomplete-in & { + border-radius: 0 0 a.$bradius a.$bradius; + } +} + +#chat-input-subonly { + cursor: default; + display: none; + position: absolute; + top: a.$gutter-md; + right: a.$gutter-sm; + width: 1.5em; + height: 1.5em; + + .btn-icon { + opacity: 0.75; + + @include a.icon-background('../img/icon-subonly.svg'); + } +} diff --git a/assets/chat/css/chat/_loading-screen.scss b/assets/chat/css/chat/_loading-screen.scss new file mode 100644 index 00000000..68a02ba6 --- /dev/null +++ b/assets/chat/css/chat/_loading-screen.scss @@ -0,0 +1,31 @@ +@use '../abstracts/' as a; + +#chat-loading { + opacity: 0.2; + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + + .chat-loading-icon { + width: 4em; + height: 4em; + display: inline-block; + animation: spin 2s linear infinite; + + @include a.icon-background('../img/icon-settings.svg'); + } +} + +@keyframes spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} diff --git a/assets/chat/css/chat/_login-screen.scss b/assets/chat/css/chat/_login-screen.scss new file mode 100644 index 00000000..4f3d188b --- /dev/null +++ b/assets/chat/css/chat/_login-screen.scss @@ -0,0 +1,26 @@ +@use '../abstracts/' as a; + +#chat-login-screen { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background: rgba(a.$color-surface-dark1, 0.75); + position: absolute; + text-align: center; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 300; + + h2 { + font-size: 2.5em; + font-weight: normal; + margin: 0; + } + + p { + margin: 1em 0 1.5em 0; + } +} diff --git a/assets/chat/css/chat/_onstreamchat.scss b/assets/chat/css/chat/_onstreamchat.scss new file mode 100644 index 00000000..415c4989 --- /dev/null +++ b/assets/chat/css/chat/_onstreamchat.scss @@ -0,0 +1,202 @@ +@use '../abstracts/' as a; + +.onstreamchat { + .chat-lines { + font-size: 1.5em; + } + + #chat, + .msg-chat, + .msg-chat:not(.rainbow-border):before, + .greentext { + background: none !important; + } + + .chat-combo { + background-image: none !important; + } + + .chat-lines { + font-family: 'Roboto', Helvetica, 'Trebuchet MS', Verdana, sans-serif; + font-weight: 500 !important; + } + + #chat-output-frame { + margin: 0; + } + + #chat-pinned-frame { + display: none !important; + } + + // Donations, subs and broadcasts + .msg-donation, + .msg-subscription, + .msg-giftsub, + .msg-massgift, + .msg-broadcast { + text-shadow: none; + padding: 0; + border-style: none none none solid; + border-width: 6px; + border-radius: 0; + + .event-top, + .event-bottom { + padding: 0 0 0 a.$gutter-md; + background: none; + } + + &.rainbow-border { + border-style: none none none solid; + border-width: 6px; + border-radius: 0; + + &:before { + content: ''; + position: absolute; + top: unset; + right: 100%; + bottom: unset; + left: unset; + z-index: -1; + margin: -1px 0 0 0; + border-radius: inherit; + background: var(--rainbow-gradient); + aspect-ratio: 1/1; + height: 100%; + transform: rotate(90deg); + } + } + } + + time, + .time, + .features, + .msg-ui, + .msg-info, + .msg-chat .text:before { + display: none !important; + } + + .continue, + .os-scrollbar { + visibility: hidden !important; + } + + .chat-lines, + .msg-chat, + .greentext, + .combo { + color: a.$text-color; + } + + .msg-pinned { + position: unset; + text-shadow: unset; + background-color: unset; + font-size: unset; + font-weight: unset; + padding-top: unset; + padding-bottom: unset; + box-shadow: unset; + border-radius: unset; + + .chat-tool-btn { + display: none !important; + } + } + + .msg-chat { + margin: 0; + padding: 1px 20px 1px 5px; + filter: drop-shadow(-1px -1px 0 rgba(black, 0.5)) + drop-shadow(1px -1px 0 rgba(black, 0.5)) + drop-shadow(-1px 1px 0 rgba(black, 0.5)) + drop-shadow(1px 1px 0 rgba(black, 0.5)); + letter-spacing: 0.03em; + } + + .msg-user, + .msg-status { + animation: msg-slide-in 0.15s cubic-bezier(0.72, 0.03, 0.45, 1); + } + + a.externallink, + a.externallink:hover { + color: a.$color-accent-light; + } + + #chat-poll-frame { + display: none !important; + } +} + +body.pref-fontscale[data-fontscale='1'] { + .onstreamchat { + font-size: 14px; + } +} + +body.pref-fontscale[data-fontscale='2'] { + .onstreamchat { + font-size: 15px; + } +} + +body.pref-fontscale[data-fontscale='3'] { + .onstreamchat { + font-size: 16px; + } +} + +body.pref-fontscale[data-fontscale='4'] { + .onstreamchat { + font-size: 18px; + } +} + +body.pref-fontscale[data-fontscale='5'] { + .onstreamchat { + font-size: 20px; + } +} + +body.pref-fontscale[data-fontscale='6'] { + .onstreamchat { + font-size: 22px; + } +} + +body.pref-fontscale[data-fontscale='7'] { + .onstreamchat { + font-size: 24px; + } +} + +body.pref-fontscale[data-fontscale='8'] { + .onstreamchat { + font-size: 26px; + } +} + +body.pref-fontscale[data-fontscale='9'] { + .onstreamchat { + font-size: 32px; + } +} + +body.pref-fontscale[data-fontscale='10'] { + .onstreamchat { + font-size: 52px; + } +} + +@keyframes msg-slide-in { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} diff --git a/assets/chat/css/chat/_output.scss b/assets/chat/css/chat/_output.scss new file mode 100644 index 00000000..30665508 --- /dev/null +++ b/assets/chat/css/chat/_output.scss @@ -0,0 +1,23 @@ +@use '../abstracts/' as a; + +@font-face { + font-family: 'Among Us'; + src: url('../../../fonts/AmongUs-Regular.ttf') format('truetype'); +} + +#chat-output-frame { + flex: 1; + overflow: hidden; + width: 100%; +} + +.chat-output { + width: 100%; + height: 100%; +} + +.chat-lines { + font-family: a.$chat-lines-font; + line-height: 1.65em; + outline: 0 !important; +} diff --git a/assets/chat/css/chat/_scroll-notify.scss b/assets/chat/css/chat/_scroll-notify.scss new file mode 100644 index 00000000..d4062c2f --- /dev/null +++ b/assets/chat/css/chat/_scroll-notify.scss @@ -0,0 +1,32 @@ +@use '../abstracts/' as a; + +.chat-scroll-notify { + padding: 0.25em 0; + color: a.$color-chat-text3; + background: a.$color-surface-dark3; + position: absolute; + bottom: -2.5em; + left: a.$gutter-md; + right: a.$gutter-md; + text-align: center; + cursor: pointer; + z-index: 130; + border-radius: a.$bradius; + opacity: 0; + transition: all 250ms; + transition-timing-function: cubic-bezier(0.6, 0.08, 0.99, 0.54); + + &:hover { + color: a.$color-chat-text1; + } + + .chat-unpinned & { + transition-timing-function: cubic-bezier(0, 0.99, 0.18, 0.99); + opacity: 1; + bottom: 0; + } + + #chat.chat-autocomplete-in & { + display: none !important; + } +} diff --git a/assets/chat/css/chat/_scrollbar-theme.scss b/assets/chat/css/chat/_scrollbar-theme.scss new file mode 100644 index 00000000..49027a82 --- /dev/null +++ b/assets/chat/css/chat/_scrollbar-theme.scss @@ -0,0 +1,89 @@ +.dgg-scroller-theme.os-scrollbar-horizontal { + right: 10px; + height: 10px; +} + +.dgg-scroller-theme.os-scrollbar-vertical { + bottom: 10px; + width: 10px; +} + +.dgg-scroller-theme.os-scrollbar-rtl.os-scrollbar-horizontal { + left: 10px; + right: 0; +} + +.dgg-scroller-theme.os-scrollbar { + padding: 2px; + box-sizing: border-box; + background: transparent; +} + +.dgg-scroller-theme.os-scrollbar-unusable { + background: transparent; +} + +.dgg-scroller-theme.os-scrollbar > .os-scrollbar-track { + background: transparent; +} + +.dgg-scroller-theme.os-scrollbar-horizontal + > .os-scrollbar-track + > .os-scrollbar-handle { + min-width: 30px; +} + +.dgg-scroller-theme.os-scrollbar-vertical + > .os-scrollbar-track + > .os-scrollbar-handle { + min-height: 30px; +} + +.dgg-scroller-theme.os-scrollbar-transition + > .os-scrollbar-track + > .os-scrollbar-handle { + transition: background-color 0.3s; +} + +.dgg-scroller-theme.os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle { + background: rgba(255, 255, 255, 0.4); +} + +.dgg-scroller-theme.os-scrollbar:hover + > .os-scrollbar-track + > .os-scrollbar-handle { + background: rgba(255, 255, 255, 0.55); +} + +.dgg-scroller-theme.os-scrollbar + > .os-scrollbar-track + > .os-scrollbar-handle.active { + background: rgba(255, 255, 255, 0.7); +} + +.dgg-scroller-theme.os-scrollbar-horizontal .os-scrollbar-handle:before, +.dgg-scroller-theme.os-scrollbar-vertical .os-scrollbar-handle:before { + content: ''; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + display: block; +} + +.dgg-scroller-theme.os-scrollbar-horizontal .os-scrollbar-handle:before { + top: -6px; + bottom: -2px; +} + +.dgg-scroller-theme.os-scrollbar-vertical .os-scrollbar-handle:before { + left: -6px; + right: -2px; +} + +.dgg-scroller-theme.os-scrollbar-rtl.os-scrollbar-vertical + .os-scrollbar-handle:before { + right: -6px; + left: -2px; +} diff --git a/assets/chat/css/chat/_settings.scss b/assets/chat/css/chat/_settings.scss new file mode 100644 index 00000000..e9aa5bbe --- /dev/null +++ b/assets/chat/css/chat/_settings.scss @@ -0,0 +1,50 @@ +// show time +.pref-showtime .time { + display: inline !important; +} + +// show flairs +.pref-hideflairicons .features { + display: none !important; +} + +// show autocomplete helper +#chat:not(.pref-autocompletehelper) #chat-auto-complete { + display: none !important; +} + +.pref-autocompletehelper #chat-auto-complete.active { + display: block !important; +} + +// disable animations +.pref-disableanimations { + .emote, + .emote:hover, + .emote::before, + .emote::after { + animation: none !important; + } + + a.user, + span.user { + animation: none !important; + } +} + +// font size +body { + &.pref-fontscale { + &[data-fontscale='small'] { + font-size: 14px; + } + + &[data-fontscale='medium'] { + font-size: 15px; + } + + &[data-fontscale='large'] { + font-size: 16px; + } + } +} diff --git a/assets/chat/css/chat/_toolbar.scss b/assets/chat/css/chat/_toolbar.scss new file mode 100644 index 00000000..b325eb5c --- /dev/null +++ b/assets/chat/css/chat/_toolbar.scss @@ -0,0 +1,52 @@ +@use '../abstracts/' as a; + +$toolbar-icons-map: ( + 'emoticon': 'emotes', + 'whisper': 'whispers', + 'watching-focus': 'watching', + 'settings': 'settings', + 'users': 'users', +); + +#chat-tools-wrap { + display: flex; + position: relative; + user-select: none; +} + +.chat-tools-group { + display: flex; + + &:first-child { + flex: 1; + } +} + +.chat-tool-btn { + @keyframes whisper-pulse { + 2% { + opacity: 1; + transform: scale(1.3); + } + } + + &.ping .btn-icon { + animation: whisper-pulse 1.5s ease-in-out; + } + + @each $id, $icon in $toolbar-icons-map { + &#chat-#{$id}-btn .btn-icon { + @include a.icon-background('../img/icon-#{$icon}.svg'); + } + } +} + +#chat-whisper-unread-indicator { + left: 100%; + color: a.$color-light; + font-size: 0.75em; + position: absolute; + vertical-align: text-bottom; + margin-left: 0.5em; + top: 6px; +} diff --git a/assets/chat/css/chat/_window-select.scss b/assets/chat/css/chat/_window-select.scss new file mode 100644 index 00000000..9d925902 --- /dev/null +++ b/assets/chat/css/chat/_window-select.scss @@ -0,0 +1,77 @@ +@use '../abstracts/' as a; + +#chat-windows-select { + padding-top: 0.5em; + background: a.$color-surface-dark4; + white-space: nowrap; + display: flex; + z-index: 100; +} + +.win-main { + width: 3em; + flex-shrink: 0; + + span { + display: none; + } + + .tab-close { + display: none !important; + } + + .dgg-icon { + display: block; + width: 100%; + height: 100%; + + @include a.icon-background('../img/dgg-icon.svg'); + } +} + +.tab { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + border-radius: a.$bradius a.$bradius 0 0; + color: a.$color-chat-text3; + user-select: none; + cursor: pointer; + font-size: 1em; + padding: a.$gutter-sm a.$gutter-lg; + + &.active { + color: a.$color-chat-text1; + background: a.$color-surface-dark1; + margin-left: 0; + margin-right: 0; + overflow: visible; + text-overflow: unset; + min-width: auto; + display: flex; + align-items: center; + + .tab-close { + display: inline-block; + } + } + + &:hover, + &.unread { + color: a.$color-chat-text1; + } +} + +.tab-close { + width: 1em; + height: 1em; + opacity: 0.25; + margin-left: a.$gutter-md; + display: none; + + @include a.icon-background('../img/icon-close.svg'); + + &:hover { + opacity: 1; + } +} diff --git a/assets/chat/css/main.scss b/assets/chat/css/main.scss new file mode 100644 index 00000000..6860dabb --- /dev/null +++ b/assets/chat/css/main.scss @@ -0,0 +1,141 @@ +@use '../../../node_modules/normalize.css/normalize.css'; +@use '../../../node_modules/tippy.js/dist/tippy.css'; +@use '../../../node_modules/tippy.js/dist/svg-arrow.css'; +@use 'abstracts' as a; + +@use 'chat'; +@use 'menus'; +@use 'messages'; +@use 'partials'; + +@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,600,700'); + +*, +*::before, +*::after { + box-sizing: inherit; +} + +html { + box-sizing: border-box; + position: relative; + color: a.$text-color1; + background: a.$color-chat-bg; + font-family: a.$chat-chrome-font; + font-size: 13px; + line-height: 1.42857143; + text-rendering: optimizeLegibility; + font-feature-settings: 'kern'; + height: 100%; + margin: 0; + padding: 0; +} + +body { + position: relative; + color: a.$text-color1; + background: a.$color-chat-bg; + font-family: a.$chat-chrome-font; + font-size: 13px; + line-height: 1.42857143; + text-rendering: optimizeLegibility; + font-feature-settings: 'kern'; + height: 100%; + margin: 0; + padding: 0; +} + +textarea, +input, +button { + font-size: 1em; + line-height: 1.42857143; + text-rendering: optimizeLegibility; + font-feature-settings: 'kern'; + font-family: inherit; +} + +/* Default button style */ +button { + cursor: pointer; + padding: 0; + margin: 0; + border: none; + background: transparent; +} + +a { + color: a.$color-accent; + text-decoration: none; + + &:hover, + &:focus { + color: a.$color-accent-light; + text-decoration: underline; + } +} + +hr { + border: 0; + margin: 1em 0; + border-top: 1px solid darken(a.$color-surface-dark1, 50%); + border-bottom: 1px solid a.$color-surface-dark3; +} + +.tippy-box[data-theme~='dgg'] { + text-align: center; + background-color: white; + color: #000; +} + +.tippy-box[data-theme~='dgg'] > .tippy-svg-arrow { + fill: white; +} + +/* Small screen, non-retina */ +@media only screen and (min-width: 320px) { + body:not(.pref-fontscale) { + font-size: 13px; + } +} + +/* Small screen, retina, stuff to override above media query */ +@media only screen and (min-device-pixel-ratio: 2) and (min-width: 320px), + only screen and (min-resolution: 192dpi) and (min-width: 320px), + only screen and (min-resolution: 2dppx) and (min-width: 320px) { + body:not(.pref-fontscale) { + font-size: 13px; + } +} + +/* Medium screen, non-retina */ +@media only screen and (min-width: 700px) { + body:not(.pref-fontscale) { + font-size: 14px; + } +} + +/* Medium screen, retina, stuff to override above media query */ +@media only screen and (min-device-pixel-ratio: 2) and (min-width: 700px), + only screen and (min-resolution: 192dpi) and (min-width: 700px), + only screen and (min-resolution: 2dppx) and (min-width: 700px) { + body:not(.pref-fontscale) { + font-size: 15px; + } +} + +/* Large screen, non-retina */ +@media only screen and (min-width: 1300px) { + body:not(.pref-fontscale) { + font-size: 16px; + } +} + +/* Large screen, retina, stuff to override above media query */ +@media only screen and (min-device-pixel-ratio: 2) and (min-width: 1300px), + only screen and (min-resolution: 192dpi) and (min-width: 1300px), + only screen and (min-resolution: 2dppx) and (min-width: 1300px) { + body:not(.pref-fontscale) { + font-size: 16px; + } +} diff --git a/assets/chat/css/menus/_emote-list.scss b/assets/chat/css/menus/_emote-list.scss new file mode 100644 index 00000000..a6382372 --- /dev/null +++ b/assets/chat/css/menus/_emote-list.scss @@ -0,0 +1,52 @@ +@use '../abstracts/' as a; + +#chat-emote-list { + .lock { + width: 1em; + height: 1em; + opacity: 0.5; + display: inline-flex; + margin-right: a.$gutter-sm; + background: transparent url('../img/icon-lock.svg') no-repeat center center; + background-size: contain; + } + + .content { + text-align: center; + outline: 0; + } + + input { + padding: a.$gutter-lg a.$gutter-lg; + border: none; + background: none; + border-radius: 0; + } + + .favorite { + flex: 0 88px; + border-top: 1px solid a.$color-surface-dark4; + } +} + +.emote-group { + display: flex; + flex-wrap: wrap; + justify-content: center; + margin: a.$gutter-lg; +} + +.emote-item { + user-select: none; + padding: a.$gutter-sm; + margin: auto; + + .emote { + cursor: pointer; + + &.disabled { + cursor: not-allowed; + opacity: 0.5; + } + } +} diff --git a/assets/chat/css/menus/_emote-tooltip.scss b/assets/chat/css/menus/_emote-tooltip.scss new file mode 100644 index 00000000..6f3f605b --- /dev/null +++ b/assets/chat/css/menus/_emote-tooltip.scss @@ -0,0 +1,61 @@ +@use '../abstracts/' as a; + +#chat-emote-tooltip { + height: fit-content; + width: fit-content; + min-width: 75px; + max-width: 250px; + z-index: 221; + + .emote-image { + display: flex; + justify-content: center; + padding: a.$gutter-md; + } + + .emote-info { + border-top: 1px solid a.$color-surface-dark4; + padding: a.$gutter-sm; + + div { + display: flex; + justify-content: center; + + &.name { + font-weight: 500; + color: a.$text-color; + } + + &.tier, + &.creator { + color: a.$text-color1; + } + } + + button.favorite { + width: 100%; + display: flex; + justify-content: center; + margin-top: 5px; + + .btn-icon { + opacity: unset; + width: unset; + display: unset; + transition: background-color 500ms; + height: 20px; + aspect-ratio: 1; + mask: url('../img/icon-favorite.svg'); + background-color: a.$text-color2; + } + + &.favorited .btn-icon { + mask: url('../img/icon-favorite-fill.svg'); + } + + &:hover .btn-icon { + background-color: a.$color-yellow; + } + } + } +} diff --git a/assets/chat/css/menus/_index.scss b/assets/chat/css/menus/_index.scss new file mode 100644 index 00000000..30135d81 --- /dev/null +++ b/assets/chat/css/menus/_index.scss @@ -0,0 +1,99 @@ +@use '../abstracts/' as a; + +@use 'emote-list'; +@use 'emote-tooltip'; +@use 'poll'; +@use 'settings'; +@use 'user-info'; +@use 'user-list'; +@use 'whispers-list'; + +.chat-menu { + display: none; + position: absolute; + z-index: 220; + height: auto; + bottom: 6.3em; + max-width: 75%; + min-width: a.$chat-min-width; + width: 33.3333%; + right: 0; + top: 0; + + &.active { + display: block; + } + + .chat-menu-inner { + height: 100%; + display: flex; + flex-direction: column; + background-color: a.$color-surface-dark3; + } + + &.left { + left: 0; + right: auto; + + .chat-menu-inner { + border-bottom-right-radius: a.$bradius; + } + } + + &.right { + right: 0; + left: auto; + + .chat-menu-inner { + border-bottom-left-radius: a.$bradius; + } + } + + .floating-window { + height: fit-content !important; + } + + .scrollable { + flex: 1; + height: 100%; + } +} + +.toolbar { + position: relative; + border-bottom: 1px solid a.$color-surface-dark4; + top: auto; + left: auto; + + h5 { + justify-content: space-between; + padding: a.$gutter-md; + font-size: 1.1em; + font-weight: normal; + color: a.$text-color1; + align-items: center; + user-select: none; + display: flex; + margin: 0; + } + + span { + line-height: 1.25em; + display: inline-block; + } + + .chat-menu-close { + width: 1em; + height: 1em; + opacity: 0.5; + font-size: 1.2em; + display: inline-block; + cursor: pointer; + + @include a.icon-background('../img/icon-close.svg'); + + &:hover { + opacity: 1; + } + } +} diff --git a/assets/chat/css/menus/_poll.scss b/assets/chat/css/menus/_poll.scss new file mode 100644 index 00000000..accd4bbf --- /dev/null +++ b/assets/chat/css/menus/_poll.scss @@ -0,0 +1,175 @@ +@use '../abstracts/' as a; + +#chat-poll-frame { + display: none; + transform: translateY(-100%); + transition: transform 250ms ease-out; + + &.active { + transform: translateY(0); + display: block; + } + + &:not(.poll-completed) { + .opt:hover { + cursor: pointer; + background-color: a.$color-surface-dark2; + } + } + + &.poll-completed { + .opt:not(.opt-winner) { + .opt-bar-inner { + background-color: a.$color-surface-dark4 !important; + } + + &.opt-marked { + .opt-info .opt-vote-number { + background-color: a.$color-surface-dark4; + } + } + } + + .opt-winner { + .opt-bar-inner { + background-color: a.$color-darkgreen !important; + } + + &.opt-marked { + .opt-info .opt-vote-number { + background-color: a.$color-darkgreen !important; + } + } + } + } +} + +.poll-frame { + padding: 0.5em 0.75em; + background: #2f2f2f; + border-radius: 4px; + margin: 4px; + color: a.$text-color; + + .poll-footer { + color: a.$text-color1; + margin: 0.75em 0 0.5em 0; + display: flex; + } + + .poll-timer { + background-color: a.$color-surface-dark3; + overflow: hidden; + padding: 3px; + flex: 1; + border-radius: 6px; + + .poll-timer-inner { + min-height: 0.3em; + box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); + background-color: a.$color-blue; + border-radius: 4px; + } + } +} + +.poll-header { + display: flex; + flex-direction: column; + width: 100%; + margin: 0.25em 0.1em 0.75em 0.1em; + + .poll-top { + display: flex; + justify-content: space-between; + width: 100%; + } + + .poll-title { + display: flex; + justify-content: space-between; + width: 100%; + opacity: 0.5; + + .poll-votes { + margin-right: a.$gutter-sm; + } + } + + .poll-question { + font-weight: 700; + } + + .poll-close { + width: 2em; + height: 1em; + opacity: 0.5; + font-size: 1.2em; + cursor: pointer; + + @include a.icon-background('../img/icon-close.svg'); + + &:hover { + opacity: 1; + } + } +} + +.opt { + display: block; + align-items: center; + margin-bottom: a.$gutter-md; + background-color: a.$color-surface-dark3; + border-radius: 6px; + padding: 4px; + + .opt-info { + display: flex; + + .opt-vote-number { + height: fit-content; + border-radius: 4px; + padding: 0 0.3em 0 0.3em; + margin: 0 0.3em 0.3em 0; + } + + .opt-bar-option { + font-weight: 500; + font-size: 0.85em; + color: a.$text-color; + margin: 0.1em 0em 0.25em 0; + display: flex; + flex-grow: 1; + } + + .opt-bar-value { + font-weight: 500; + font-size: 0.85em; + margin-right: a.$gutter-sm; + color: a.$text-color; + white-space: nowrap; + } + } + + .opt-bar { + flex: 1; + overflow: hidden; + background-color: a.$color-surface-dark2; + border-radius: 4px; + max-height: 0.75em; + + .opt-bar-inner { + padding: 0 0.25em; + min-height: 0.75em; + box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); + transition: all 750ms; + background-color: a.$color-darkred; + border-radius: 4px; + } + } + + &.opt-marked .opt-info .opt-vote-number { + background-color: a.$color-darkred; + color: a.$text-color; + } +} diff --git a/assets/chat/css/menus/_settings.scss b/assets/chat/css/menus/_settings.scss new file mode 100644 index 00000000..19d05939 --- /dev/null +++ b/assets/chat/css/menus/_settings.scss @@ -0,0 +1,53 @@ +@use '../abstracts/' as a; + +#chat-settings { + #chat-settings-form { + margin: a.$gutter-lg 0; + } + + .form-group { + margin: a.$gutter-lg a.$gutter-lg; + display: block; + position: relative; + } + + h4 { + font-size: 0.9em; + margin-top: a.$gutter-lg * 2; + margin-bottom: a.$gutter-lg; + padding-left: a.$gutter-lg; + color: a.$text-color-disabled; + text-transform: uppercase; + font-weight: 600; + } + + label { + display: inline-block; + font-weight: normal; + max-width: 100%; + margin-bottom: a.$gutter-md; + } + + .checkbox label { + margin-bottom: 0; + font-weight: 400; + max-width: 100%; + cursor: pointer; + display: flex; + justify-items: center; + align-items: center; + } + + .checkbox input { + margin: 0 a.$gutter-sm 0 0; + line-height: normal; + box-sizing: border-box; + padding: 0; + } + + select { + border-radius: a.$bradius; + padding: a.$gutter-sm; + width: 100%; + } +} diff --git a/assets/chat/css/menus/_user-info.scss b/assets/chat/css/menus/_user-info.scss new file mode 100644 index 00000000..b1129101 --- /dev/null +++ b/assets/chat/css/menus/_user-info.scss @@ -0,0 +1,97 @@ +@use '../abstracts/' as a; + +$toolbar-icons-map: ( + 'mute': 'mute', + 'ban': 'ban', + 'logs': 'logs', + 'whisper': 'whispers', + 'ignore': 'ignore', + 'unignore': 'unignore', +); + +#chat-user-info { + height: fit-content; + bottom: unset; + min-width: 250px; + max-width: 350px; + + .floating-window { + box-shadow: 0px 0px 6px black; + border-radius: 6px; + } + + .user-info h5 { + padding-left: a.$gutter-md; + margin-top: unset; + margin-bottom: unset; + border-bottom: 1px solid a.$color-surface-dark4; + } + + .flairs { + margin-top: a.$gutter-lg; + margin-bottom: a.$gutter-lg; + padding-left: a.$gutter-md; + } + + .features { + display: grid; + grid-template-columns: repeat(3, 1fr); + align-items: center; + justify-items: center; + margin-left: -0.2em; + } + + .stalk { + height: 100px; + + .scrollable { + background: a.$color-chat-bg; + } + } + + .chat-tool-btn { + &:hover, + &.active { + .btn-icon { + opacity: 1; + } + } + + @each $id, $icon in $toolbar-icons-map { + &##{$id}-user-btn .btn-icon { + @include a.icon-background('../img/icon-#{$icon}.svg'); + } + } + } + + .hidden { + display: none !important; + } +} + +.action-buttons { + margin: a.$gutter-md 0 a.$gutter-md 0; + display: grid; + grid-auto-flow: column; + justify-content: space-around; +} + +#action-durations { + height: calc(20px + 2 * a.$gutter-md); + display: flex; + justify-content: space-around; + text-align: center; + font-size: 1.2em; + + .ban-duration-button, + .mute-duration-button { + opacity: 0.25; + transition: opacity 150ms; + color: white; + width: 100%; + + &:hover { + opacity: 1; + } + } +} diff --git a/assets/chat/css/menus/_user-list.scss b/assets/chat/css/menus/_user-list.scss new file mode 100644 index 00000000..10e45d14 --- /dev/null +++ b/assets/chat/css/menus/_user-list.scss @@ -0,0 +1,98 @@ +@use '../abstracts/' as a; + +#chat-user-list { + .section { + margin: 1.5em 0em 0.5em; + + .title { + padding: 0em 0em 0.2em 1em; + font-weight: 600; + border-bottom: 1px solid; + + .features { + float: right; + display: inline-flex; + vertical-align: text-top; + align-items: center; + margin-right: a.$gutter-md; + + .flair { + cursor: pointer; + margin-right: a.$gutter-xs; + } + } + } + } + + .content { + margin-top: -(a.$gutter-md); + padding-bottom: a.$gutter-lg; + } + + .scrollable { + max-height: calc(100% - 3em); + } + + &.search-in { + .user-entry { + display: none; + + &.found { + display: flex; + } + } + } + + input { + padding: a.$gutter-lg a.$gutter-lg; + border: none; + background: none; + border-radius: 0; + } +} + +.user-entry { + margin: 0; + cursor: pointer; + padding: 0 a.$gutter-lg; + text-decoration: none; + visibility: visible; + align-items: center; + display: flex; + + .user-actions { + position: absolute; + right: a.$gutter-md; + + .mention-nick, + .whisper-nick { + visibility: hidden; + margin-right: a.$gutter-xs; + margin-top: 0.45em; + display: inline-block; + opacity: 0.25; + width: 1em; + height: 1em; + &:hover { + opacity: 1; + } + } + + .mention-nick { + @include a.icon-background('../img/icon-share.svg'); + } + + .whisper-nick { + @include a.icon-background('../img/icon-whisper.svg'); + } + } + + &:hover { + background: #282828; + + .mention-nick, + .whisper-nick { + visibility: visible; + } + } +} diff --git a/assets/chat/css/menus/_whispers-list.scss b/assets/chat/css/menus/_whispers-list.scss new file mode 100644 index 00000000..31adea0e --- /dev/null +++ b/assets/chat/css/menus/_whispers-list.scss @@ -0,0 +1,78 @@ +@use '../abstracts/' as a; + +#chat-whisper-users { + .content > ul { + margin: 0; + padding: a.$gutter-md 0; + } + + .unread-0 { + .badge { + display: none; + } + + .user, + .user:hover { + color: a.$text-color1; + } + } + + .empty { + color: a.$text-color1; + margin: a.$gutter-lg; + } +} + +.conversation { + list-style: none; + position: relative; + cursor: pointer; + padding-left: a.$gutter-md; + display: flex; + align-items: center; + + .user { + color: a.$color-accent; + display: block; + + &:hover { + color: a.$color-accent-light; + + .badge { + color: a.$color-chat-text1; + } + } + } + + .badge, + .remove { + float: right; + margin-right: a.$gutter-md; + } + + .badge { + font-size: 0.8em; + padding: 0 a.$gutter-md; + display: inline-block; + background: a.$color-surface-dark4; + border-radius: 50%; + margin: a.$gutter-xs 0; + color: a.$color-chat-text2; + } + + .remove { + opacity: 0.25; + display: inline-block; + text-decoration: none; + text-align: center; + line-height: 1.3em; + width: 1.3em; + height: 1.3em; + + @include a.icon-background('../img/icon-close.svg'); + + &:hover { + opacity: 1; + } + } +} diff --git a/assets/chat/css/messages/_index.scss b/assets/chat/css/messages/_index.scss new file mode 100644 index 00000000..051d5dad --- /dev/null +++ b/assets/chat/css/messages/_index.scss @@ -0,0 +1,6 @@ +@use 'base'; +@use 'emote'; +@use 'event'; +@use 'pinned'; +@use 'ui'; +@use 'user'; diff --git a/assets/chat/css/messages/base/_censored.scss b/assets/chat/css/messages/base/_censored.scss new file mode 100644 index 00000000..34bbe952 --- /dev/null +++ b/assets/chat/css/messages/base/_censored.scss @@ -0,0 +1,22 @@ +@use '../../abstracts/' as a; + +.censored { + .text { + display: none; + } + + .ctrl { + display: inline-block; + + &:after { + color: a.$color-accent; + cursor: pointer; + padding-left: a.$gutter-md; + content: ''; + } + + &:hover:after { + color: a.$color-accent-light; + } + } +} diff --git a/assets/chat/css/messages/base/_continue.scss b/assets/chat/css/messages/base/_continue.scss new file mode 100644 index 00000000..fcc128ac --- /dev/null +++ b/assets/chat/css/messages/base/_continue.scss @@ -0,0 +1,13 @@ +@use '../../abstracts/' as a; + +.msg-continue { + .text:before { + color: a.$color-chat-disabled; + content: '> '; + } + + .features, + .user { + display: none; + } +} diff --git a/assets/chat/css/messages/base/_highlight.scss b/assets/chat/css/messages/base/_highlight.scss new file mode 100644 index 00000000..0e4430ac --- /dev/null +++ b/assets/chat/css/messages/base/_highlight.scss @@ -0,0 +1,15 @@ +@use '../../abstracts/' as a; + +.msg-highlight { + color: a.$color-chat-text1; + background-color: a.$color-chat-highlight; + + time, + .continue { + color: a.$color-chat-text3; + } + + .pref-taggedvisibility & { + background-color: a.$color-chat-highlight; + } +} diff --git a/assets/chat/css/messages/base/_historical.scss b/assets/chat/css/messages/base/_historical.scss new file mode 100644 index 00000000..134cc459 --- /dev/null +++ b/assets/chat/css/messages/base/_historical.scss @@ -0,0 +1,25 @@ +@use '../../abstracts/' as a; + +.msg-historical { + color: a.$text-color1; + + .time { + display: inline !important; + } + + &:before { + background: none !important; + } +} + +.chat-output:not(.chat-win-main) { + .msg-historical { + background-color: a.$color-chat-emphasize; + color: a.$color-chat-text1; + } + + .msg-historical.msg-own { + background: none !important; + color: a.$color-chat-text2; + } +} diff --git a/assets/chat/css/messages/base/_index.scss b/assets/chat/css/messages/base/_index.scss new file mode 100644 index 00000000..ee0bf679 --- /dev/null +++ b/assets/chat/css/messages/base/_index.scss @@ -0,0 +1,94 @@ +@use '../../abstracts/' as a; + +@use 'censored'; +@use 'continue'; +@use 'highlight'; +@use 'historical'; +@use 'me'; +@use 'own'; +@use 'tagged'; + +$link-color-map: ( + 'nsfw': a.$color-underline-nsfw, + 'nsfl': a.$color-underline-nsfl, + 'spoilers': a.$color-underline-spoilers, +); + +.msg-chat { + word-wrap: break-word; + padding: a.$gutter-xs a.$gutter-md * 2 a.$gutter-xs a.$gutter-md; + color: a.$color-chat-text2; + + .time { + font-size: 0.8em; + color: a.$color-chat-disabled; + padding-right: a.$gutter-sm; + display: none; /* hidden by default */ + } + + .user { + font-weight: 500; + cursor: pointer; + margin-left: a.$gutter-sm; + color: a.$color-label-user; + } + + .chat-user { + cursor: pointer; + position: relative; + + &:hover { + text-decoration: underline; + } + } + + .greentext { + color: a.$color-green-text; + } + + .sus { + text-transform: uppercase; + font-family: 'Among Us', a.$chat-lines-font; + } + + .externallink { + border-style: solid; + border-color: transparent; + border-width: 1px 0 1px 0; + color: a.$color-link; + position: relative; + + &:visited { + color: a.$color-link-visited; + } + + &:hover, + &:focus { + color: a.$color-link-hover; + } + + @each $type, $color in $link-color-map { + .#{$type}-link { + border-style: dashed; + border-width: 1px 0 1px 0; + border-color: transparent transparent $color transparent; + } + } + } + + .hidden { + display: none !important; + } + + .embed-button { + position: relative; + top: 2.5px; + margin-left: a.$gutter-sm; + margin-right: a.$gutter-xs; + opacity: 0.5; + + &:hover { + opacity: 1; + } + } +} diff --git a/assets/chat/css/messages/base/_me.scss b/assets/chat/css/messages/base/_me.scss new file mode 100644 index 00000000..5c0de314 --- /dev/null +++ b/assets/chat/css/messages/base/_me.scss @@ -0,0 +1,3 @@ +.msg-me .text { + font-style: italic; +} diff --git a/assets/chat/css/messages/base/_own.scss b/assets/chat/css/messages/base/_own.scss new file mode 100644 index 00000000..aa66c661 --- /dev/null +++ b/assets/chat/css/messages/base/_own.scss @@ -0,0 +1,6 @@ +@use '../../abstracts/' as a; + +.msg-own { + background-color: a.$color-chat-emphasize; + color: a.$color-chat-text1; +} diff --git a/assets/chat/css/messages/base/_tagged.scss b/assets/chat/css/messages/base/_tagged.scss new file mode 100644 index 00000000..7b17d23b --- /dev/null +++ b/assets/chat/css/messages/base/_tagged.scss @@ -0,0 +1,39 @@ +@use '../../abstracts/' as a; + +$tag-colors: ( + 'green': a.$color-green, + 'yellow': a.$color-yellow, + 'orange': a.$color-orange, + 'red': a.$color-red, + 'purple': a.$color-purple, + 'blue': a.$color-blue, + 'sky': a.$color-sky, + 'lime': a.$color-lime, + 'pink': a.$color-pink, + 'black': a.$color-black, +); + +.msg-tagged { + position: relative; + + &:before { + position: absolute; + top: 0; + left: 0; + bottom: 0; + min-width: 0.45em; + display: block; + background: a.$color-black; + content: ''; + } + + .pref-taggedvisibility & { + background-color: a.$color-chat-tagged; + } + + @each $name, $color in $tag-colors { + &.msg-tagged-#{$name}:before { + background-color: $color; + } + } +} diff --git a/assets/chat/css/messages/emote/_combo.scss b/assets/chat/css/messages/emote/_combo.scss new file mode 100644 index 00000000..e3b791f5 --- /dev/null +++ b/assets/chat/css/messages/emote/_combo.scss @@ -0,0 +1,176 @@ +@use '../../abstracts/' as a; + +.chat-combo { + color: a.$color-chat-text1; + display: inline-block; + position: relative; + line-height: 2em; + padding-left: a.$gutter-md; + + i { + font-style: normal; + display: inline-block; + vertical-align: middle; + } + + .hit, + .combo, + .count, + .x { + text-shadow: + -1px -1px 0 #000, + 1px -1px 0 #000, + -1px 1px 0 #000, + 1px 1px 0 #000; + } + + .combo { + display: none; + color: a.$text-color1; + font-weight: normal; + } + + .hit { + color: a.$color-light; + animation: emote-hit 600ms 1; + font-style: italic; + text-transform: uppercase; + margin-left: 0; + letter-spacing: 0.05em; + display: inline-block; + } + + .count { + font-size: 1.15em; + letter-spacing: -0.05em; + font-weight: bold; + } + + &.x5 { + .count { + font-size: 150%; + } + } + + &.x10 { + .count { + font-size: 200%; + } + + .combo { + font-weight: bold; + } + } + + &.x20 { + .count { + font-size: 300%; + } + + .combo { + font-weight: bold; + } + } + + &.x30 { + .count { + font-size: 400%; + } + + .combo { + font-weight: bold; + } + } + + &.x50 { + .count { + font-size: 500%; + } + + .combo { + font-weight: bold; + } + } + + &.combo-complete { + &.x10, + &.x20, + &.x30, + &.x50 { + animation: emote-greyout 3500ms 1; + background: transparent url('../img/emote-splat.png') no-repeat center + center; + background-size: 100% 100%; + filter: grayscale(100%); + + .combo { + color: a.$color-light; + margin-left: a.$gutter-md; + } + } + + .combo { + animation: emote-complete 1000ms 1; + display: inline-block; + } + + .hit { + display: none; + } + } +} + +@keyframes emote-hit { + 0% { + color: #b91010; + font-size: 200%; + } + 1% { + color: a.$color-light; + font-size: 190%; + } + 2% { + color: #b91010; + font-size: 200%; + } + 3% { + color: a.$color-light; + font-size: 190%; + } + 4% { + color: #b91010; + font-size: 200%; + } + 100% { + color: a.$color-light; + font-size: 120%; + } +} + +@keyframes emote-complete { + 0% { + transform: translate(-10px, 0); + opacity: 0; + } + 2% { + transform: translate(10px, 0); + color: white; + opacity: 1; + } + 100% { + transform: translate(0, 0); + opacity: 1; + } +} + +@keyframes emote-greyout { + 0% { + filter: grayscale(0); + } + 75% { + filter: grayscale(0); + } + 100% { + filter: grayscale(100%); + } +} diff --git a/assets/chat/css/messages/emote/_index.scss b/assets/chat/css/messages/emote/_index.scss new file mode 100644 index 00000000..f307b345 --- /dev/null +++ b/assets/chat/css/messages/emote/_index.scss @@ -0,0 +1,8 @@ +@use 'combo'; + +.emote { + display: inline-block; + position: relative; + overflow: hidden; + text-indent: -999em; +} diff --git a/assets/chat/css/messages/event/_broadcast.scss b/assets/chat/css/messages/event/_broadcast.scss new file mode 100644 index 00000000..ef345845 --- /dev/null +++ b/assets/chat/css/messages/event/_broadcast.scss @@ -0,0 +1,11 @@ +@use '../../abstracts/' as a; + +.msg-broadcast { + border-color: a.$color-text-broadcast; + + .broadcast-icon { + filter: invert(100%); + + @include a.icon-background('../img/icon-broadcast.png'); + } +} diff --git a/assets/chat/css/messages/event/_donation.scss b/assets/chat/css/messages/event/_donation.scss new file mode 100644 index 00000000..ac3f2927 --- /dev/null +++ b/assets/chat/css/messages/event/_donation.scss @@ -0,0 +1,29 @@ +@use '../../abstracts/' as a; + +$amount-color-map: ( + 5: #59aeea, + 10: #2addc8, + 25: #4db524, + 50: #dd29d2, + 100: #e62117, +); + +.msg-donation { + &.amount-0 { + border-color: #1c5cdb; + } + + @each $amount, $color in $amount-color-map { + &.amount-#{$amount} { + border-color: $color; + } + + .donation-icon { + &.amount-#{$amount} { + filter: invert(100%); + + @include a.icon-background('../img/donation-amount-#{$amount}.png'); + } + } + } +} diff --git a/assets/chat/css/messages/event/_index.scss b/assets/chat/css/messages/event/_index.scss new file mode 100644 index 00000000..82c555bd --- /dev/null +++ b/assets/chat/css/messages/event/_index.scss @@ -0,0 +1,84 @@ +@use '../../abstracts/' as a; + +@use 'broadcast'; +@use 'donation'; +@use 'subscription'; + +.msg-donation, +.msg-subscription, +.msg-giftsub, +.msg-massgift, +.msg-broadcast { + text-shadow: 1px 1px 3px rgba(0, 0, 0, 1); + font-size: 1.1em; + font-weight: 400; + padding: unset; + border-radius: 10px; + border-style: solid; + border-color: unset; + border-width: 3px; + display: flex; + flex-direction: column; + margin: a.$gutter-sm a.$gutter-md * 2 a.$gutter-sm a.$gutter-sm; + + .event-wrapper { + border-radius: 10px; + } + + .event-top { + display: flex; + padding: a.$gutter-xs a.$gutter-md * 2 a.$gutter-xs a.$gutter-md; + background-color: a.$color-chat-emphasize; + justify-content: space-between; + align-items: center; + border-top-right-radius: 10px; + border-top-left-radius: 10px; + } + + .event-icon { + width: 2.25em; + height: 2.25em; + color: a.$color-chat-disabled; + position: relative; + text-decoration: none; + display: inline-block; + border: 0.25em solid transparent; + flex-shrink: 0; + opacity: 0.75; + } + + .event-bottom { + padding: a.$gutter-xs a.$gutter-md * 2 a.$gutter-xs a.$gutter-md; + background-color: a.$color-chat-bg; + border-bottom-right-radius: 10px; + border-bottom-left-radius: 10px; + } + + &:not(:has(.event-bottom)) { + .event-top { + border-bottom-right-radius: 10px; + border-bottom-left-radius: 10px; + } + } + + .user { + margin-left: unset; + text-shadow: none; + } + + &.censored { + .text { + display: none; + } + + .event-bottom:after { + color: a.$color-accent; + cursor: pointer; + content: ''; + } + + .event-bottom:hover:after { + color: a.$color-accent-light; + } + } +} diff --git a/assets/chat/css/messages/event/_subscription.scss b/assets/chat/css/messages/event/_subscription.scss new file mode 100644 index 00000000..0798a3ae --- /dev/null +++ b/assets/chat/css/messages/event/_subscription.scss @@ -0,0 +1,67 @@ +@use '../../abstracts/' as a; + +.msg-subscription, +.msg-giftsub, +.msg-massgift { + position: relative; + + .subscription-icon { + &.regular { + @include a.icon-background('../img/sub-regular.svg'); + } + + &.gift { + filter: invert(100%); + + @include a.icon-background('../img/sub-gift.png'); + } + + &.mass-gift { + filter: invert(100%); + + @include a.icon-background('../img/sub-mass-gift.png'); + } + } + + .streak { + display: flex; + flex-direction: column; + width: calc(100% - 2.25em - a.$gutter-md * 2); + } + + .streak-message { + border-top-style: solid; + border-top-width: 1px; + border-top-color: a.$color-chat-place; + padding-top: 2px; + margin-top: 2px; + } + + .tier { + font-weight: 500; + cursor: unset; + + &:hover { + text-decoration: unset; + &:before { + content: unset !important; + } + } + } + + &.rainbow-border { + background-clip: padding-box; + border: solid 3px transparent; + border-radius: 10px; + + &:before { + content: ''; + position: absolute; + inset: 0; + z-index: -1; + margin: -3px; + border-radius: inherit; + background: var(--rainbow-gradient); + } + } +} diff --git a/assets/chat/css/messages/pinned/_frame.scss b/assets/chat/css/messages/pinned/_frame.scss new file mode 100644 index 00000000..1af1c274 --- /dev/null +++ b/assets/chat/css/messages/pinned/_frame.scss @@ -0,0 +1,38 @@ +@use '../../abstracts/' as a; + +#chat-pinned-frame { + display: none; + padding: 4px; + position: absolute; + width: 100%; + z-index: 210; + + &.active { + display: block; + } +} + +#chat-pinned-show-btn { + display: none; + width: 1.3em; + height: 1.3em; + cursor: pointer; + color: a.$color-chat-disabled; + position: absolute; + text-decoration: none; + right: 0; + margin-top: 2px; + margin-right: a.$gutter-md; + + &.active { + display: block; + } + + .btn-icon { + @include a.icon-background('../img/icon-pin.svg'); + } + + &:hover .btn-icon { + opacity: 1; + } +} diff --git a/assets/chat/css/messages/pinned/_index.scss b/assets/chat/css/messages/pinned/_index.scss new file mode 100644 index 00000000..5cbb6700 --- /dev/null +++ b/assets/chat/css/messages/pinned/_index.scss @@ -0,0 +1,51 @@ +@use '../../abstracts/' as a; + +@use 'frame'; + +.msg-pinned { + background-color: a.$color-chat-emphasize; + padding-top: a.$gutter-md; + padding-bottom: a.$gutter-md; + border-style: solid; + border-radius: 10px; + border-color: #505050; + transition: all 0.15s ease-in-out; + + &:hover { + border-color: a.$color-chat-text3; + } + + &.hidden { + display: none; + } + + .user { + text-shadow: none; + } + + .chat-tool-btn { + width: 1.5em; + height: 1.5em; + cursor: pointer; + color: a.$color-chat-disabled; + position: relative; + text-decoration: none; + float: right; + border: unset; + + &:hover, + &.active { + .btn-icon { + opacity: 1; + } + } + } + + #close-pin-btn .btn-icon { + @include a.icon-background('../img/icon-close.svg'); + } + + #unpin-btn .btn-icon { + @include a.icon-background('../img/icon-unpin.svg'); + } +} diff --git a/assets/chat/css/messages/ui/_command.scss b/assets/chat/css/messages/ui/_command.scss new file mode 100644 index 00000000..b872f8c2 --- /dev/null +++ b/assets/chat/css/messages/ui/_command.scss @@ -0,0 +1,5 @@ +@use '../../abstracts/' as a; + +.msg-command .text:before { + @include a.msg-icon(-32px, -0px); +} diff --git a/assets/chat/css/messages/ui/_error.scss b/assets/chat/css/messages/ui/_error.scss new file mode 100644 index 00000000..ef1c7663 --- /dev/null +++ b/assets/chat/css/messages/ui/_error.scss @@ -0,0 +1,5 @@ +@use '../../abstracts/' as a; + +.msg-error .text:before { + @include a.msg-icon(-0px, -21px); +} diff --git a/assets/chat/css/messages/ui/_index.scss b/assets/chat/css/messages/ui/_index.scss new file mode 100644 index 00000000..cfbb8d88 --- /dev/null +++ b/assets/chat/css/messages/ui/_index.scss @@ -0,0 +1,25 @@ +@use '../../abstracts/' as a; + +@use 'command'; +@use 'error'; +@use 'info'; +@use 'status'; + +.msg-command, +.msg-error, +.msg-info, +.msg-status { + white-space: pre-wrap; + color: a.$color-chat-text1; + + .text:before { + content: ''; + display: inline-block; + vertical-align: text-top; + margin-right: a.$gutter-sm; + } + + &.msg-continue .text:before { + content: ''; + } +} diff --git a/assets/chat/css/messages/ui/_info.scss b/assets/chat/css/messages/ui/_info.scss new file mode 100644 index 00000000..96d5dd32 --- /dev/null +++ b/assets/chat/css/messages/ui/_info.scss @@ -0,0 +1,9 @@ +@use '../../abstracts/' as a; + +.msg-info { + color: unset; +} + +.msg-info .text:before { + @include a.msg-icon(-50px, -0px); +} diff --git a/assets/chat/css/messages/ui/_status.scss b/assets/chat/css/messages/ui/_status.scss new file mode 100644 index 00000000..f179af18 --- /dev/null +++ b/assets/chat/css/messages/ui/_status.scss @@ -0,0 +1,5 @@ +@use '../../abstracts/' as a; + +.msg-status .text:before { + @include a.msg-icon(-50px, -18px); +} diff --git a/assets/chat/css/messages/user/_death.scss b/assets/chat/css/messages/user/_death.scss new file mode 100644 index 00000000..c2597a4b --- /dev/null +++ b/assets/chat/css/messages/user/_death.scss @@ -0,0 +1,16 @@ +@use '../../abstracts/' as a; + +.msg-death { + .text { + font-style: italic; + } + + .user:before { + content: ''; + display: inline-block; + vertical-align: text-top; + margin-right: a.$gutter-sm; + + @include a.msg-icon(-32px, -0px); + } +} diff --git a/assets/chat/css/messages/user/_index.scss b/assets/chat/css/messages/user/_index.scss new file mode 100644 index 00000000..684f96eb --- /dev/null +++ b/assets/chat/css/messages/user/_index.scss @@ -0,0 +1,18 @@ +@use '../../abstracts/' as a; + +@use 'death'; +@use 'whisper'; + +.msg-user { + .features { + display: inline-flex; + vertical-align: text-top; + align-items: center; + margin-left: -(a.$gutter-xs); + } + + .flair { + cursor: pointer; + margin-left: a.$gutter-xs; + } +} diff --git a/assets/chat/css/messages/user/_whisper.scss b/assets/chat/css/messages/user/_whisper.scss new file mode 100644 index 00000000..5a051d46 --- /dev/null +++ b/assets/chat/css/messages/user/_whisper.scss @@ -0,0 +1,19 @@ +@use '../../abstracts/' as a; + +.msg-whisper { + background-color: a.$color-chat-emphasize; + + a.user { + background: a.$color-accent; + padding: a.$gutter-xs a.$gutter-md a.$gutter-xs a.$gutter-md; + border-radius: a.$bradius; + font-weight: normal; + color: white; + + &:hover { + text-decoration: none; + color: a.$color-accent; + background: white; + } + } +} diff --git a/assets/chat/css/partials/_button.scss b/assets/chat/css/partials/_button.scss new file mode 100644 index 00000000..aad77269 --- /dev/null +++ b/assets/chat/css/partials/_button.scss @@ -0,0 +1,29 @@ +@use '../abstracts/' as a; + +button.btn { + display: inline-block; + padding: a.$gutter-md a.$gutter-lg; + margin-bottom: 0; + font-weight: normal; + text-align: center; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + user-select: none; + background-image: none; + border: 1px solid transparent; + border-radius: a.$bradius; +} + +.btn-primary { + color: a.$text-color; + background-color: a.$color-accent; + border-color: a.$color-accent; +} + +.btn-default { + color: a.$text-color3; + background-color: a.$color-surface-light1; + border-color: a.$color-surface-light3; +} diff --git a/assets/icons/icons.scss b/assets/chat/css/partials/_icon.scss similarity index 56% rename from assets/icons/icons.scss rename to assets/chat/css/partials/_icon.scss index 893131d0..8afbac18 100644 --- a/assets/icons/icons.scss +++ b/assets/chat/css/partials/_icon.scss @@ -1,8 +1,17 @@ -.icon-command, -.icon-error, +.btn-icon { + opacity: 0.25; + transition: opacity 150ms; + width: 100%; + height: 100%; + display: inline-block; + + &:hover, + &.active { + opacity: 1; + } +} + .icon-google, -.icon-info, -.icon-status, .icon-tv, .icon-twitch, .icon-twitter { @@ -10,31 +19,11 @@ background-repeat: no-repeat; display: inline-block; } -.icon-command { - background-position: -32px -0px; - width: 16px; - height: 16px; -} -.icon-error { - background-position: -0px -21px; - width: 16px; - height: 16px; -} .icon-google { background-position: -18px -21px; width: 16px; height: 16px; } -.icon-info { - background-position: -50px -0px; - width: 16px; - height: 16px; -} -.icon-status { - background-position: -50px -18px; - width: 16px; - height: 16px; -} .icon-tv { background-position: -0px -0px; width: 30px; diff --git a/assets/chat/css/partials/_index.scss b/assets/chat/css/partials/_index.scss new file mode 100644 index 00000000..d42d30e0 --- /dev/null +++ b/assets/chat/css/partials/_index.scss @@ -0,0 +1,3 @@ +@use 'button'; +@use 'icon'; +@use 'tool-button'; diff --git a/assets/chat/css/partials/_tool-button.scss b/assets/chat/css/partials/_tool-button.scss new file mode 100644 index 00000000..08c7545c --- /dev/null +++ b/assets/chat/css/partials/_tool-button.scss @@ -0,0 +1,12 @@ +@use '../abstracts/' as a; + +.chat-tool-btn { + width: 2.25em; + height: 2.25em; + cursor: pointer; + color: a.$color-chat-disabled; + position: relative; + text-decoration: none; + display: inline-block; + border: 0.35em solid transparent; /* used for "padding" */ +} diff --git a/assets/chat/css/style.scss b/assets/chat/css/style.scss deleted file mode 100644 index b6b8447b..00000000 --- a/assets/chat/css/style.scss +++ /dev/null @@ -1,2267 +0,0 @@ -@import '../../common'; -@import '../../icons/icons'; -@import '~normalize.css'; -@import '~tippy.js/dist/tippy.css'; -@import '~tippy.js/dist/svg-arrow.css'; -@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,600,700'); - -*, -*::before, -*::after { - box-sizing: inherit; -} -html { - box-sizing: border-box; -} - -$chat-chrome-font: 'Roboto', Helvetica, 'Trebuchet MS', Verdana, sans-serif; -$chat-lines-font: 'Roboto', Helvetica, 'Trebuchet MS', Verdana, sans-serif; -$chat-min-width: 300px; - -$gutter-xs: 0.2em; -$gutter-sm: 0.3em; -$gutter-md: 0.6em; -$gutter-lg: 0.9em; - -$bradius: 0.25em; - -html, -body { - position: relative; - color: $text-color1; - background: $color-chat-bg; - font-family: $chat-chrome-font; - font-size: 13px; - line-height: 1.42857143; - text-rendering: optimizeLegibility; - font-feature-settings: 'kern'; -} -textarea, -input, -button { - font-size: 1em; - line-height: 1.42857143; - text-rendering: optimizeLegibility; - font-feature-settings: 'kern'; - font-family: inherit; -} - -/* Default button style */ -button { - cursor: pointer; - padding: 0; - margin: 0; - border: none; - background: transparent; -} - -html, -body { - height: 100%; - margin: 0; - padding: 0; -} - -/* Small screen, non-retina */ -@media only screen and (min-width: 320px) { - body:not(.pref-fontscale) { - font-size: 13px; - } -} - -/* Small screen, retina, stuff to override above media query */ -@media only screen and (min-device-pixel-ratio: 2) and (min-width: 320px), - only screen and (min-resolution: 192dpi) and (min-width: 320px), - only screen and (min-resolution: 2dppx) and (min-width: 320px) { - body:not(.pref-fontscale) { - font-size: 13px; - } -} - -/* Medium screen, non-retina */ -@media only screen and (min-width: 700px) { - body:not(.pref-fontscale) { - font-size: 14px; - } -} - -/* Medium screen, retina, stuff to override above media query */ -@media only screen and (min-device-pixel-ratio: 2) and (min-width: 700px), - only screen and (min-resolution: 192dpi) and (min-width: 700px), - only screen and (min-resolution: 2dppx) and (min-width: 700px) { - body:not(.pref-fontscale) { - font-size: 15px; - } -} - -/* Large screen, non-retina */ -@media only screen and (min-width: 1300px) { - body:not(.pref-fontscale) { - font-size: 16px; - } -} - -/* Large screen, retina, stuff to override above media query */ -@media only screen and (min-device-pixel-ratio: 2) and (min-width: 1300px), - only screen and (min-resolution: 192dpi) and (min-width: 1300px), - only screen and (min-resolution: 2dppx) and (min-width: 1300px) { - body:not(.pref-fontscale) { - font-size: 16px; - } -} - -body.pref-fontscale[data-fontscale='small'] { - font-size: 14px; -} -body.pref-fontscale[data-fontscale='medium'] { - font-size: 15px; -} -body.pref-fontscale[data-fontscale='large'] { - font-size: 16px; -} - -a { - color: $color-accent; - text-decoration: none; -} -a:hover, -a:focus { - color: $color-accent-light; - text-decoration: underline; -} -hr { - border: 0; - margin: 1em 0; - border-top: 1px solid darken($color-surface-dark1, 50%); - border-bottom: 1px solid $color-surface-dark3; -} - -/* Layout */ -#chat { - min-width: $chat-min-width; - display: flex; - flex-direction: column; - position: relative; - width: 100%; - height: 100%; - overflow: hidden; -} -#chat-output-frame { - flex: 1; - overflow: hidden; - width: 100%; -} -.chat-output { - width: 100%; - height: 100%; -} -#chat-input-frame { - padding: $gutter-md $gutter-md 0 $gutter-md; -} -#chat-input-wrap { - position: relative; -} -@keyframes whisper-pulse { - 2% { - opacity: 1; - transform: scale(1.3); - } -} -#chat-tools-wrap { - display: flex; - position: relative; - user-select: none; - .chat-tools-group { - display: flex; - } - .chat-tools-group:first-child { - flex: 1; - } - .chat-tool-btn { - width: 2.25em; - height: 2.25em; - cursor: pointer; - color: $color-chat-disabled; - position: relative; - text-decoration: none; - display: inline-block; - border: 0.35em solid transparent; /* used for "padding" */ - .btn-icon { - opacity: 0.25; - transition: opacity 150ms; - width: 100%; - height: 100%; - display: inline-block; - } - } - .chat-tool-btn.ping .btn-icon { - animation: whisper-pulse 1.5s ease-in-out; - } - .chat-tool-btn:hover .btn-icon, - .chat-tool-btn.active .btn-icon { - opacity: 1; - } - #chat-emoticon-btn .btn-icon { - background: transparent url('../img/icon-emotes.svg') no-repeat center - center; - background-size: contain; - } - #chat-whisper-btn .btn-icon { - background: transparent url('../img/icon-whispers.svg') no-repeat center - center; - background-size: contain; - } - #chat-watching-focus-btn .btn-icon { - background: transparent url('../img/icon-watching.svg') no-repeat center - center; - background-size: contain; - } - #chat-settings-btn .btn-icon { - background: transparent url('../img/icon-settings.svg') no-repeat center - center; - background-size: contain; - } - #chat-users-btn .btn-icon { - background: transparent url('../img/icon-users.svg') no-repeat center center; - background-size: contain; - } -} - -#chat-input-control { - max-height: 140px; - position: relative; - color: $color-chat-text2; - background: $color-surface-dark2; - border: 1px solid $color-surface-dark3; - outline: none; - resize: none; - margin: 0; - width: 100%; - padding: $gutter-md; - border-radius: $bradius; - box-shadow: none; - box-sizing: border-box; - display: block; - overflow: hidden; -} -#chat-input-control::placeholder { - color: $color-chat-place; -} -#chat-input-subonly { - cursor: default; - display: none; - position: absolute; - top: $gutter-md; - right: $gutter-sm; - width: 1.5em; - height: 1.5em; - .btn-icon { - display: inline-block; - opacity: 0.75; - transition: opacity 150ms; - width: 100%; - height: 100%; - background: transparent url('../img/icon-subonly.svg') no-repeat center - center; - background-size: contain; - &:hover { - opacity: 1; - } - } -} - -.chat-lines { - font-family: $chat-lines-font; - line-height: 1.65em; - outline: 0 !important; -} - -/* Toolbar */ -#chat-whisper-unread-indicator { - left: 100%; - color: $color-light; - font-size: 0.75em; - position: absolute; - vertical-align: text-bottom; - margin-left: 0.5em; - top: 6px; -} - -/* Base ChatMessage */ -.msg-chat { - word-wrap: break-word; - padding: $gutter-xs $gutter-md * 2 $gutter-xs $gutter-md; - color: $color-chat-text2; - .time { - font-size: 0.8em; - color: $color-chat-disabled; - padding-right: $gutter-sm; - display: none; /* hidden by default */ - } - .user { - font-weight: 500; - cursor: pointer; - margin-left: $gutter-sm; - color: $color-label-user; - } - .chat-user { - cursor: pointer; - position: relative; - } - .chat-user:hover { - text-decoration: underline; - } - .greentext { - color: $color-green-text; - } - .sus { - text-transform: uppercase; - font-family: 'Among Us', $chat-lines-font; - } - .externallink { - border-style: solid; - border-color: transparent; - border-width: 1px 0 1px 0; - } - .externallink { - color: $color-link; - position: relative; - } - .externallink:visited { - color: $color-link-visited; - } - .externallink:hover, - .externallink:focus { - color: $color-link-hover; - } - .nsfw-link { - border-style: dashed; - border-color: transparent transparent $color-underline-nsfw transparent; - border-width: 1px 0 1px 0; - } - .nsfl-link { - border-style: dashed; - border-color: transparent transparent $color-underline-nsfl transparent; - border-width: 1px 0 1px 0; - } - .spoilers-link { - border-style: dashed; - border-color: transparent transparent $color-underline-spoilers transparent; - border-width: 1px 0 1px 0; - } - .hidden { - display: none !important; - } - - .embed-button { - position: relative; - top: 2.5px; - margin-left: $gutter-sm; - margin-right: $gutter-xs; - opacity: 0.5; - &:hover { - opacity: 1; - } - } -} - -/* Base ChatUserMessage */ -.msg-user .features { - display: inline-flex; - vertical-align: text-top; - align-items: center; - margin-left: -$gutter-xs; - .flair { - cursor: pointer; - margin-left: $gutter-xs; - } -} - -/* Status messages */ -.msg-status, -.msg-command, -.msg-error, -.msg-info { - white-space: pre-wrap; -} -.msg-status, -.msg-command, -.msg-error { - color: $color-chat-text1; -} -.msg-status .text:before, -.msg-command .text:before, -.msg-info .text:before, -.msg-error .text:before { - content: ''; - display: inline-block; - vertical-align: text-top; - margin-right: $gutter-sm; -} -.msg-status .text:before { - @extend .icon-status; -} -.msg-command .text:before { - @extend .icon-command; -} -.msg-info .text:before { - @extend .icon-info; -} -.msg-error .text:before { - @extend .icon-error; -} - -/* Own messages */ -.msg-own { - background-color: $color-chat-emphasize; - color: $color-chat-text1; -} - -/* Censored */ -.censored { - .text { - display: none; - } - .ctrl { - display: inline-block; - } - .ctrl:after { - color: $color-accent; - cursor: pointer; - padding-left: $gutter-md; - content: ''; - } - .ctrl:hover:after { - color: $color-accent-light; - } -} - -/* Continue */ -.msg-continue .text:before { - color: $color-chat-disabled; - content: '> '; -} -.msg-continue .features, -.msg-continue .user { - display: none; -} - -.msg-status.msg-continue .text:before, -.msg-command.msg-continue .text:before, -.msg-info.msg-continue .text:before, -.msg-error.msg-continue .text:before, -.msg-broadcast.msg-continue .text:before { - content: ''; -} - -/* /ME message */ -.msg-me .text { - font-style: italic; -} - -/* Whispers */ -.msg-whisper { - background-color: $color-chat-emphasize; -} -.msg-whisper a.user { - background: $color-accent; - padding: $gutter-xs $gutter-md $gutter-xs $gutter-md; - border-radius: $bradius; - font-weight: normal; - color: white; -} -.msg-whisper a.user:hover { - text-decoration: none; - color: $color-accent; - background: white; -} - -/* Tagging */ -.msg-tagged { - position: relative; -} -.pref-taggedvisibility .msg-tagged { - background-color: $color-chat-tagged; -} -.msg-tagged:before { - position: absolute; - top: 0; - left: 0; - bottom: 0; - min-width: 0.45em; - display: block; - background: $color-black; - content: ''; -} -.msg-tagged-green:before { - background-color: $color-green; -} -.msg-tagged-yellow:before { - background-color: $color-yellow; -} -.msg-tagged-orange:before { - background-color: $color-orange; -} -.msg-tagged-red:before { - background-color: $color-red; -} -.msg-tagged-purple:before { - background-color: $color-purple; -} -.msg-tagged-blue:before { - background-color: $color-blue; -} -.msg-tagged-sky:before { - background-color: $color-sky; -} -.msg-tagged-lime:before { - background-color: $color-lime; -} -.msg-tagged-pink:before { - background-color: $color-pink; -} -.msg-tagged-black:before { - background-color: $color-black; -} - -/* Historical messages */ -.msg-historical { - color: $text-color1; -} -.msg-historical:before { - background: none !important; -} -.msg-historical .time { - display: inline !important; -} -.chat-output:not(.chat-win-main) { - .msg-historical { - background-color: $color-chat-emphasize; - color: $color-chat-text1; - } - .msg-historical.msg-own { - background: none !important; - color: $color-chat-text2; - } -} - -.msg-donation, -.msg-subscription, -.msg-giftsub, -.msg-massgift, -.msg-broadcast { - text-shadow: 1px 1px 3px rgba(0, 0, 0, 1); - font-size: 1.1em; - font-weight: 400; - padding: unset; - border-radius: 10px; - border-style: solid; - border-color: unset; - border-width: 3px; - display: flex; - flex-direction: column; - margin: $gutter-sm $gutter-md * 2 $gutter-sm $gutter-sm; - - .event-wrapper { - border-radius: 10px; - } - - .event-top { - display: flex; - padding: $gutter-xs $gutter-md * 2 $gutter-xs $gutter-md; - background-color: $color-chat-emphasize; - justify-content: space-between; - align-items: center; - border-top-right-radius: 10px; - border-top-left-radius: 10px; - } - - .event-icon { - width: 2.25em; - height: 2.25em; - color: $color-chat-disabled; - position: relative; - text-decoration: none; - display: inline-block; - border: 0.25em solid transparent; - flex-shrink: 0; - opacity: 0.75; - } - - .event-bottom { - padding: $gutter-xs $gutter-md * 2 $gutter-xs $gutter-md; - background-color: $color-chat-bg; - border-bottom-right-radius: 10px; - border-bottom-left-radius: 10px; - } - - &:not(:has(.event-bottom)) { - .event-top { - border-bottom-right-radius: 10px; - border-bottom-left-radius: 10px; - } - } - - .user { - margin-left: unset; - text-shadow: none; - } - - &.censored { - .text { - display: none; - } - .event-bottom:after { - color: $color-accent; - cursor: pointer; - content: ''; - } - .event-bottom:hover:after { - color: $color-accent-light; - } - } -} - -/* Broadcasts */ -.msg-broadcast { - border-color: $color-text-broadcast; - - .broadcast-icon { - background: transparent url('../img/icon-broadcast.png') no-repeat center - center; - background-size: contain; - filter: invert(100%); - } -} - -/* Donations */ -.msg-donation { - .donation-icon { - &.amount-5 { - background: transparent url('../img/donation-amount-5.png') no-repeat - center center; - background-size: contain; - filter: invert(100%); - } - &.amount-10 { - background: transparent url('../img/donation-amount-10.png') no-repeat - center center; - background-size: contain; - filter: invert(100%); - } - &.amount-25 { - background: transparent url('../img/donation-amount-25.png') no-repeat - center center; - background-size: contain; - filter: invert(100%); - } - &.amount-50 { - background: transparent url('../img/donation-amount-50.png') no-repeat - center center; - background-size: contain; - filter: invert(100%); - } - &.amount-100 { - background: transparent url('../img/donation-amount-100.png') no-repeat - center center; - background-size: contain; - filter: invert(100%); - } - } - - &.amount-0 { - border-color: #1c5cdb; - } - &.amount-5 { - border-color: #59aeea; - } - &.amount-10 { - border-color: #2addc8; - } - &.amount-25 { - border-color: #4db524; - } - &.amount-50 { - border-color: #dd29d2; - } - &.amount-100 { - border-color: #e62117; - } -} - -/* Subscriptions */ -.msg-subscription, -.msg-giftsub, -.msg-massgift { - position: relative; - - .subscription-icon { - &.regular { - background: transparent url('../img/sub-regular.svg') no-repeat center - center; - background-size: contain; - } - &.gift { - background: transparent url('../img/sub-gift.png') no-repeat center center; - background-size: contain; - filter: invert(100%); - } - &.mass-gift { - background: transparent url('../img/sub-mass-gift.png') no-repeat center - center; - background-size: contain; - filter: invert(100%); - } - } - - .streak { - display: flex; - flex-direction: column; - width: calc(100% - 2.25em - $gutter-md * 2); - } - - .streak-message { - border-top-style: solid; - border-top-width: 1px; - border-top-color: $color-chat-place; - padding-top: 2px; - margin-top: 2px; - } - - .tier { - font-weight: 500; - cursor: unset; - - &:hover { - text-decoration: unset; - &:before { - content: unset !important; - } - } - } - - &.rainbow-border { - background-clip: padding-box; - border: solid 3px transparent; - border-radius: 10px; - - &:before { - content: ''; - position: absolute; - inset: 0; - z-index: -1; - margin: -3px; - border-radius: inherit; - background: var(--rainbow-gradient); - } - } -} - -.msg-death { - .text { - font-style: italic; - } - - .user:before { - content: ''; - display: inline-block; - vertical-align: text-top; - margin-right: $gutter-sm; - - @extend .icon-command; - } -} - -/* Highlight */ -.msg-highlight { - color: $color-chat-text1; - background-color: $color-chat-highlight; - time, - .continue { - color: $color-chat-text3; - } -} -.pref-taggedvisibility .msg-highlight { - background-color: $color-chat-highlight; -} - -/* Pinned Messages */ -#chat-pinned-frame { - display: none; - padding: 4px; - position: absolute; - width: 100%; - z-index: 210; - - &.active { - display: block; - } - - #chat-pinned-show-btn { - display: none; - width: 1.3em; - height: 1.3em; - cursor: pointer; - color: $color-chat-disabled; - position: absolute; - text-decoration: none; - right: 0; - margin-top: 2px; - margin-right: $gutter-md; - &.active { - display: block; - } - .btn-icon { - opacity: 0.25; - transition: opacity 150ms; - width: 100%; - height: 100%; - display: inline-block; - background: transparent url('../img/icon-pin.svg') no-repeat center center; - background-size: contain; - } - &:hover .btn-icon { - opacity: 1; - } - } -} - -.msg-pinned { - background-color: $color-chat-emphasize; - padding-top: $gutter-md; - padding-bottom: $gutter-md; - border-style: solid; - border-radius: 10px; - border-color: #505050; - transition: all 0.15s ease-in-out; - - &:hover { - border-color: $color-chat-text3; - } - - .user { - text-shadow: none; - } - - .chat-tool-btn { - width: 1.5em; - height: 1.5em; - cursor: pointer; - color: $color-chat-disabled; - position: relative; - text-decoration: none; - float: right; - .btn-icon { - opacity: 0.25; - transition: opacity 150ms; - width: 100%; - height: 100%; - display: inline-block; - } - } - .chat-tool-btn:hover .btn-icon, - .chat-tool-btn.active .btn-icon { - opacity: 1; - } - - #close-pin-btn .btn-icon { - background: transparent url('../img/icon-close.svg') no-repeat center center; - background-size: contain; - } - #unpin-btn .btn-icon { - background: transparent url('../img/icon-unpin.svg') no-repeat center center; - background-size: contain; - } - - &.hidden { - display: none; - } -} - -.watching-focus:not(.focus) { - .msg-emote, - .msg-user, - .msg-death { - opacity: 0.3; - - &.watching-same, - &.msg-highlight { - opacity: 1; - } - } -} - -/* Focus or highlight a line */ -.focus .msg-chat { - opacity: 0.3; - - &.msg-pinned { - opacity: 1; - } -} - -/* Emotes and combo */ -@keyframes emote-hit { - 0% { - color: #b91010; - font-size: 200%; - } - 1% { - color: $color-light; - font-size: 190%; - } - 2% { - color: #b91010; - font-size: 200%; - } - 3% { - color: $color-light; - font-size: 190%; - } - 4% { - color: #b91010; - font-size: 200%; - } - 100% { - color: $color-light; - font-size: 120%; - } -} -@keyframes emote-complete { - 0% { - transform: translate(-10px, 0); - opacity: 0; - } - 2% { - transform: translate(10px, 0); - color: white; - opacity: 1; - } - 100% { - transform: translate(0, 0); - opacity: 1; - } -} -@keyframes emote-greyout { - 0% { - filter: grayscale(0); - } - 75% { - filter: grayscale(0); - } - 100% { - filter: grayscale(100%); - } -} -.emote { - display: inline-block; - position: relative; - overflow: hidden; - text-indent: -999em; -} -.chat-combo { - color: $color-chat-text1; - display: inline-block; - position: relative; - line-height: 2em; - padding-left: $gutter-md; - i { - font-style: normal; - display: inline-block; - vertical-align: middle; - } - .hit, - .combo, - .count, - .x { - text-shadow: - -1px -1px 0 #000, - 1px -1px 0 #000, - -1px 1px 0 #000, - 1px 1px 0 #000; - } - .combo { - display: none; - color: $text-color1; - font-weight: normal; - } - .hit { - color: $color-light; - animation: emote-hit 600ms 1; - font-style: italic; - text-transform: uppercase; - margin-left: 0; - letter-spacing: 0.05em; - display: inline-block; - } - .count { - font-size: 1.15em; - letter-spacing: -0.05em; - font-weight: bold; - } - &.x5 { - .count { - font-size: 150%; - } - } - &.x10 { - .count { - font-size: 200%; - } - .combo { - font-weight: bold; - } - } - &.x20 { - .count { - font-size: 300%; - } - .combo { - font-weight: bold; - } - } - &.x30 { - .count { - font-size: 400%; - } - .combo { - font-weight: bold; - } - } - &.x50 { - .count { - font-size: 500%; - } - .combo { - font-weight: bold; - } - } - &.combo-complete { - &.x10, - &.x20, - &.x30, - &.x50 { - animation: emote-greyout 3500ms 1; - background: transparent url('../img/emote-splat.png') no-repeat center - center; - background-size: 100% 100%; - filter: grayscale(100%); - .combo { - color: $color-light; - margin-left: $gutter-md; - } - } - .combo { - animation: emote-complete 1000ms 1; - display: inline-block; - } - .hit { - display: none; - } - } -} - -/* Helpers */ -.chat-scroll-notify { - padding: 0.25em 0; - color: $color-chat-text3; - background: $color-surface-dark3; - position: absolute; - bottom: -2.5em; - left: $gutter-md; - right: $gutter-md; - text-align: center; - cursor: pointer; - z-index: 130; - border-radius: $bradius; - opacity: 0; - transition: all 250ms; - transition-timing-function: cubic-bezier(0.6, 0.08, 0.99, 0.54); -} -.chat-scroll-notify:hover { - color: $color-chat-text1; -} -.chat-unpinned .chat-scroll-notify { - transition-timing-function: cubic-bezier(0, 0.99, 0.18, 0.99); - opacity: 1; - bottom: 0; -} - -#chat.chat-autocomplete-in { - .chat-scroll-notify { - display: none !important; - } - #chat-input-control { - border-radius: 0 0 $bradius $bradius; - } -} - -#chat:not(.pref-autocompletehelper) { - #chat-auto-complete { - display: none !important; - } -} - -/* Auto complete */ -#chat-auto-complete { - pointer-events: none; - transition: opacity 750ms; - transition-timing-function: cubic-bezier(0, 0.74, 0.1, 0.99); - opacity: 0; - z-index: 131; - border-radius: $bradius $bradius 0 0; - position: absolute; - font-size: 1.1em; - line-height: 2em; - height: 2em; - top: -2em; - left: 0; - right: 0; - overflow: hidden; - white-space: nowrap; - &.active { - opacity: 1; - pointer-events: auto; - } - ul { - position: absolute; - white-space: nowrap; - list-style: none; - padding: 0; - margin: 0; - } - li { - padding: 0 $gutter-sm; - cursor: pointer; - text-decoration: none; - display: inline-block; - color: $color-chat-text3; - background: rgba($color-surface-dark1, 0.75); - &:first-child { - border-radius: $bradius 0 0 0; - } - &:last-child { - border-radius: 0 $bradius 0 0; - } - &:hover { - color: lighten($color-chat-text3, 20); - } - &.active { - color: $text-color; - } - } -} - -/* Window selector */ -#chat-windows-select { - padding-top: 0.5em; - background: $color-surface-dark4; - white-space: nowrap; - display: flex; - z-index: 100; - .tab { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - border-radius: $bradius $bradius 0 0; - color: $color-chat-text3; - user-select: none; - cursor: pointer; - font-size: 1em; - padding: $gutter-sm $gutter-lg; - } - .tab-close { - background: transparent url('../img/icon-close.svg') no-repeat center center; - background-size: contain; - width: 1em; - height: 1em; - opacity: 0.25; - margin-left: $gutter-md; - display: none; - &:hover { - opacity: 1; - } - } - .tab:hover, - .tab.unread { - color: $color-chat-text1; - } - .tab.active { - color: $color-chat-text1; - background: $color-surface-dark1; - margin-left: 0; - margin-right: 0; - overflow: visible; - text-overflow: unset; - min-width: auto; - display: flex; - align-items: center; - .tab-close { - display: inline-block; - } - } - .win-main { - width: 3em; - flex-shrink: 0; - .tab-close { - display: none !important; - } - span { - display: none; - } - .dgg-icon { - background: transparent url('../img/dgg-icon.svg') no-repeat center center; - background-size: contain; - display: block; - width: 100%; - height: 100%; - } - } -} - -/* Chat menus */ -.chat-menu { - display: none; - position: absolute; - z-index: 220; - height: auto; - bottom: 6.3em; - max-width: 75%; - min-width: $chat-min-width; - width: 33.3333%; - right: 0; - top: 0; - .toolbar { - position: relative; - border-bottom: 1px solid $color-surface-dark4; - top: auto; - left: auto; - h5 { - justify-content: space-between; - padding: $gutter-md; - font-size: 1.1em; - font-weight: normal; - color: $text-color1; - align-items: center; - user-select: none; - display: flex; - margin: 0; - } - span { - line-height: 1.25em; - display: inline-block; - } - .chat-menu-close { - width: 1em; - height: 1em; - opacity: 0.5; - font-size: 1.2em; - display: inline-block; - background: transparent url('../img/icon-close.svg') no-repeat center - center; - background-size: contain; - cursor: pointer; - &:hover { - opacity: 1; - } - } - } - .floating-window { - height: fit-content !important; - } - .chat-menu-inner { - height: 100%; - display: flex; - flex-direction: column; - background-color: $color-surface-dark3; - } - .scrollable { - flex: 1; - height: 100%; - } - &.active { - display: block; - } - &.left { - left: 0; - right: auto; - .chat-menu-inner { - border-bottom-right-radius: $bradius; - } - } - &.right { - right: 0; - left: auto; - .chat-menu-inner { - border-bottom-left-radius: $bradius; - } - } -} - -#chat-emote-list { - .lock { - width: 1em; - height: 1em; - opacity: 0.5; - display: inline-flex; - margin-right: $gutter-sm; - background: transparent url('../img/icon-lock.svg') no-repeat center center; - background-size: contain; - } - .content { - text-align: center; - outline: 0; - .emote-group { - display: flex; - flex-wrap: wrap; - justify-content: center; - margin: $gutter-lg; - .emote-item { - user-select: none; - padding: $gutter-sm; - margin: auto; - .emote { - cursor: pointer; - &.disabled { - cursor: not-allowed; - opacity: 0.5; - } - } - } - } - } - input { - padding: $gutter-lg $gutter-lg; - border: none; - background: none; - border-radius: 0; - } - .favorite { - flex: 0 88px; - border-top: 1px solid $color-surface-dark4; - } -} - -#chat-whisper-users { - .content > ul { - margin: 0; - padding: $gutter-md 0; - } - .conversation { - list-style: none; - position: relative; - cursor: pointer; - padding-left: $gutter-md; - display: flex; - align-items: center; - .user { - color: $color-accent; - display: block; - } - .user:hover { - color: $color-accent-light; - .badge { - color: $color-chat-text1; - } - } - .badge { - font-size: 0.8em; - padding: 0 $gutter-md; - display: inline-block; - background: $color-surface-dark4; - border-radius: 50%; - margin: $gutter-xs 0; - color: $color-chat-text2; - } - .badge, - .remove { - float: right; - margin-right: $gutter-md; - } - .remove { - opacity: 0.25; - background: transparent url(../img/icon-close.svg) no-repeat center center; - background-size: contain; - display: inline-block; - text-decoration: none; - text-align: center; - line-height: 1.3em; - width: 1.3em; - height: 1.3em; - } - .remove:hover { - opacity: 1; - } - } - .unread-0 .badge { - display: none; - } - .unread-0 .user, - .unread-0 .user:hover { - color: $text-color1; - } - .empty { - color: $text-color1; - margin: $gutter-lg; - } -} - -#chat-user-list { - .section { - margin: 1.5em 0em 0.5em; - .title { - padding: 0em 0em 0.2em 1em; - font-weight: 600; - border-bottom: 1px solid; - .features { - float: right; - display: inline-flex; - vertical-align: text-top; - align-items: center; - margin-right: $gutter-md; - .flair { - cursor: pointer; - margin-right: $gutter-xs; - } - } - } - .user-entry { - margin: 0; - cursor: pointer; - padding: 0 $gutter-lg; - text-decoration: none; - visibility: visible; - align-items: center; - display: flex; - .user-actions { - position: absolute; - right: $gutter-md; - .mention-nick { - background: transparent url('../img/icon-share.svg') no-repeat center - center; - background-size: contain; - } - .whisper-nick { - background: transparent url('../img/icon-whisper.svg') no-repeat - center center; - background-size: contain; - } - .mention-nick, - .whisper-nick { - visibility: hidden; - margin-right: $gutter-xs; - margin-top: 0.45em; - display: inline-block; - opacity: 0.25; - width: 1em; - height: 1em; - &:hover { - opacity: 1; - } - } - } - &:hover .mention-nick, - &:hover .whisper-nick { - visibility: visible; - } - &:hover { - background: #282828; - } - } - } - .content { - margin-top: -$gutter-md; - padding-bottom: $gutter-lg; - } - .scrollable { - max-height: calc(100% - 3em); - } - &.search-in .user-entry { - display: none; - } - &.search-in .user-entry.found { - display: flex; - } - input { - padding: $gutter-lg $gutter-lg; - border: none; - background: none; - border-radius: 0; - } -} - -#chat-emote-tooltip { - height: fit-content; - width: fit-content; - min-width: 75px; - max-width: 250px; - z-index: 221; - .emote-image { - display: flex; - justify-content: center; - padding: $gutter-md; - } - .emote-info { - border-top: 1px solid $color-surface-dark4; - padding: $gutter-sm; - div { - display: flex; - justify-content: center; - &.name { - font-weight: 500; - color: $text-color; - } - &.tier, - &.creator { - color: $text-color1; - } - } - button.favorite { - width: 100%; - display: flex; - justify-content: center; - margin-top: 5px; - .btn-icon { - transition: background-color 500ms; - height: 20px; - aspect-ratio: 1; - mask: url('../img/icon-favorite.svg'); - background-color: $text-color2; - } - &.favorited .btn-icon { - mask: url('../img/icon-favorite-fill.svg'); - } - &:hover .btn-icon { - background-color: $color-yellow; - } - } - } -} - -#chat-user-info { - height: fit-content; - bottom: unset; - min-width: 250px; - max-width: 350px; - .floating-window { - box-shadow: 0px 0px 6px black; - border-radius: 6px; - } - .user-info h5 { - padding-left: $gutter-md; - margin-top: unset; - margin-bottom: unset; - border-bottom: 1px solid $color-surface-dark4; - } - .flairs { - margin-top: $gutter-lg; - margin-bottom: $gutter-lg; - padding-left: $gutter-md; - } - .features { - display: grid; - grid-template-columns: repeat(3, 1fr); - align-items: center; - justify-items: center; - margin-left: -0.2em; - } - .stalk { - height: 100px; - } - .stalk .scrollable { - background: $color-chat-bg; - } - .action-buttons { - margin: $gutter-md 0 $gutter-md 0; - display: grid; - grid-auto-flow: column; - justify-content: space-around; - } - .chat-tool-btn { - width: 2.25em; - height: 2.25em; - cursor: pointer; - color: $color-chat-disabled; - position: relative; - text-decoration: none; - display: inline-block; - border: 0.35em solid transparent; /* used for "padding" */ - .btn-icon { - opacity: 0.25; - transition: opacity 150ms; - width: 100%; - height: 100%; - display: inline-block; - } - } - .chat-tool-btn:hover .btn-icon, - .chat-tool-btn.active .btn-icon { - opacity: 1; - } - #mute-user-btn .btn-icon { - background: transparent url('../img/icon-mute.svg') no-repeat center center; - background-size: contain; - } - #ban-user-btn .btn-icon { - background: transparent url('../img/icon-ban.svg') no-repeat center center; - background-size: contain; - } - #logs-user-btn .btn-icon { - background: transparent url('../img/icon-logs.svg') no-repeat center center; - background-size: contain; - } - #whisper-user-btn .btn-icon { - background: transparent url('../img/icon-whispers.svg') no-repeat center - center; - background-size: contain; - } - #ignore-user-btn .btn-icon { - background: transparent url('../img/icon-ignore.svg') no-repeat center - center; - background-size: contain; - } - #unignore-user-btn .btn-icon { - background: transparent url('../img/icon-unignore.svg') no-repeat center - center; - background-size: contain; - } - #action-durations { - height: calc(20px + 2 * $gutter-md); - display: flex; - justify-content: space-around; - text-align: center; - font-size: 1.2em; - } - .ban-duration-button, - .mute-duration-button { - opacity: 0.25; - transition: opacity 150ms; - color: white; - width: 100%; - } - .ban-duration-button:hover, - .mute-duration-button:hover { - opacity: 1; - } - .hidden { - display: none !important; - } -} - -#chat-settings { - #chat-settings-form { - margin: $gutter-lg 0; - } - - .form-group { - margin: $gutter-lg $gutter-lg; - display: block; - position: relative; - } - - h4 { - font-size: 0.9em; - margin-top: $gutter-lg * 2; - margin-bottom: $gutter-lg; - padding-left: $gutter-lg; - color: $text-color-disabled; - text-transform: uppercase; - font-weight: 600; - } - label { - display: inline-block; - font-weight: normal; - max-width: 100%; - margin-bottom: $gutter-md; - } - .checkbox label { - margin-bottom: 0; - font-weight: 400; - max-width: 100%; - cursor: pointer; - display: flex; - justify-items: center; - align-items: center; - } - .checkbox input { - margin: 0 $gutter-sm 0 0; - line-height: normal; - box-sizing: border-box; - padding: 0; - } - select { - border-radius: $bradius; - padding: $gutter-sm; - width: 100%; - } -} - -/* Login screen */ -#chat-login-screen { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - background: rgba($color-surface-dark1, 0.75); - position: absolute; - text-align: center; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 300; - h2 { - font-size: 2.5em; - font-weight: normal; - margin: 0; - } - p { - margin: 1em 0 1.5em 0; - } -} - -/* Loading screen */ -@keyframes spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -#chat-loading { - opacity: 0.2; - display: flex; - align-items: center; - justify-content: center; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - .chat-loading-icon { - width: 4em; - height: 4em; - display: inline-block; - animation: spin 2s linear infinite; - background: transparent url('../img/icon-settings.svg') no-repeat center - center; - background-size: contain; - } -} - -/* Settings */ -.pref-showtime .time { - display: inline; -} -.pref-hideflairicons .features { - display: none; -} -.pref-autocompletehelper #chat-auto-complete.active { - display: block; -} -.pref-disableanimations { - .emote, - .emote:hover, - .emote::before, - .emote::after { - animation: none !important; - } - - a.user, - span.user { - animation: none !important; - } -} - -/* OverlayScrollbars theme */ -.dgg-scroller-theme.os-scrollbar-horizontal { - right: 10px; - height: 10px; -} - -.dgg-scroller-theme.os-scrollbar-vertical { - bottom: 10px; - width: 10px; -} - -.dgg-scroller-theme.os-scrollbar-rtl.os-scrollbar-horizontal { - left: 10px; - right: 0; -} - -.dgg-scroller-theme.os-scrollbar { - padding: 2px; - box-sizing: border-box; - background: transparent; -} - -.dgg-scroller-theme.os-scrollbar-unusable { - background: transparent; -} - -.dgg-scroller-theme.os-scrollbar > .os-scrollbar-track { - background: transparent; -} - -.dgg-scroller-theme.os-scrollbar-horizontal - > .os-scrollbar-track - > .os-scrollbar-handle { - min-width: 30px; -} - -.dgg-scroller-theme.os-scrollbar-vertical - > .os-scrollbar-track - > .os-scrollbar-handle { - min-height: 30px; -} - -.dgg-scroller-theme.os-scrollbar-transition - > .os-scrollbar-track - > .os-scrollbar-handle { - transition: background-color 0.3s; -} - -.dgg-scroller-theme.os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle { - background: rgba(255, 255, 255, 0.4); -} - -.dgg-scroller-theme.os-scrollbar:hover - > .os-scrollbar-track - > .os-scrollbar-handle { - background: rgba(255, 255, 255, 0.55); -} - -.dgg-scroller-theme.os-scrollbar - > .os-scrollbar-track - > .os-scrollbar-handle.active { - background: rgba(255, 255, 255, 0.7); -} - -.dgg-scroller-theme.os-scrollbar-horizontal .os-scrollbar-handle:before, -.dgg-scroller-theme.os-scrollbar-vertical .os-scrollbar-handle:before { - content: ''; - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - display: block; -} - -.dgg-scroller-theme.os-scrollbar-horizontal .os-scrollbar-handle:before { - top: -6px; - bottom: -2px; -} - -.dgg-scroller-theme.os-scrollbar-vertical .os-scrollbar-handle:before { - left: -6px; - right: -2px; -} - -.dgg-scroller-theme.os-scrollbar-rtl.os-scrollbar-vertical - .os-scrollbar-handle:before { - right: -6px; - left: -2px; -} - -/** Form Controls */ -.form-control { - color: $color-chat-text2; - background: $color-surface-dark1; - border: 1px solid lighten($color-surface-dark1, 9); -} -.form-control:focus { - color: $color-chat-text1; - background: $color-surface-dark1; - border: 1px solid lighten($color-surface-dark1, 15); - box-shadow: none; - outline: none; -} -.form-control[disabled], -.form-control[readonly], -.form-control::placeholder { - color: $color-chat-place; -} -.form-control[type='text'], -textarea.form-control { - width: 100%; -} - -button.btn { - display: inline-block; - padding: $gutter-md $gutter-lg; - margin-bottom: 0; - font-weight: normal; - text-align: center; - white-space: nowrap; - vertical-align: middle; - touch-action: manipulation; - cursor: pointer; - user-select: none; - background-image: none; - border: 1px solid transparent; - border-radius: $bradius; -} -.btn-primary { - color: $text-color; - background-color: $color-accent; - border-color: $color-accent; -} -.btn-default { - color: $text-color3; - background-color: $color-surface-light1; - border-color: $color-surface-light3; -} - -@keyframes msg-slide-in { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} - -.onstreamchat { - /*background: #434343 !important;*/ - - .chat-lines { - font-size: 1.5em; - } - - #chat, - .msg-chat, - .msg-chat:not(.rainbow-border):before, - .greentext { - background: none !important; - } - .chat-combo { - background-image: none !important; - } - .chat-lines { - font-family: 'Roboto', Helvetica, 'Trebuchet MS', Verdana, sans-serif; - font-weight: 500 !important; - } - #chat-output-frame { - margin: 0; - } - #chat-pinned-frame { - display: none !important; - } - - // Donations, subs and broadcasts - .msg-donation, - .msg-subscription, - .msg-giftsub, - .msg-massgift, - .msg-broadcast { - text-shadow: none; - padding: 0; - border-style: none none none solid; - border-width: 6px; - border-radius: 0; - - .event-top, - .event-bottom { - padding: 0 0 0 $gutter-md; - background: none; - } - - &.rainbow-border { - &:before { - content: ''; - position: absolute; - top: unset; - right: 100%; - bottom: unset; - left: unset; - z-index: -1; - margin: -1px 0 0 0; - border-radius: inherit; - background: var(--rainbow-gradient); - aspect-ratio: 1/1; - height: 100%; - transform: rotate(90deg); - } - } - } - - time, - .time, - .features, - .msg-ui, - .msg-info, - .msg-chat .text:before { - display: none !important; - } - - .continue, - .os-scrollbar { - visibility: hidden !important; - } - - .chat-lines, - .msg-chat, - .greentext, - .combo { - color: $text-color; - } - - .msg-pinned { - position: unset; - text-shadow: unset; - background-color: unset; - font-size: unset; - font-weight: unset; - padding-top: unset; - padding-bottom: unset; - box-shadow: unset; - border-radius: unset; - - .chat-tool-btn { - display: none !important; - } - } - - .msg-chat { - margin: 0; - padding: 1px 20px 1px 5px; - filter: drop-shadow(-1px -1px 0 rgba(black, 0.5)) - drop-shadow(1px -1px 0 rgba(black, 0.5)) - drop-shadow(-1px 1px 0 rgba(black, 0.5)) - drop-shadow(1px 1px 0 rgba(black, 0.5)); - letter-spacing: 0.03em; - } - - .msg-user, - .msg-status { - animation: msg-slide-in 0.15s cubic-bezier(0.72, 0.03, 0.45, 1); - } - - a.externallink, - a.externallink:hover { - color: $color-accent-light; - } -} - -body.pref-fontscale[data-fontscale='1'] { - .onstreamchat { - font-size: 14px; - } -} -body.pref-fontscale[data-fontscale='2'] { - .onstreamchat { - font-size: 15px; - } -} -body.pref-fontscale[data-fontscale='3'] { - .onstreamchat { - font-size: 16px; - } -} -body.pref-fontscale[data-fontscale='4'] { - .onstreamchat { - font-size: 18px; - } -} -body.pref-fontscale[data-fontscale='5'] { - .onstreamchat { - font-size: 20px; - } -} -body.pref-fontscale[data-fontscale='6'] { - .onstreamchat { - font-size: 22px; - } -} -body.pref-fontscale[data-fontscale='7'] { - .onstreamchat { - font-size: 24px; - } -} -body.pref-fontscale[data-fontscale='8'] { - .onstreamchat { - font-size: 26px; - } -} -body.pref-fontscale[data-fontscale='9'] { - .onstreamchat { - font-size: 32px; - } -} -body.pref-fontscale[data-fontscale='10'] { - .onstreamchat { - font-size: 52px; - } -} - -#chat-poll-frame { - display: none; - transform: translateY(-100%); - transition: transform 250ms ease-out; - &.active { - transform: translateY(0); - display: block; - } - .poll-frame { - padding: 0.5em 0.75em; - background: #2f2f2f; - border-radius: 4px; - margin: 4px; - color: $text-color; - .poll-header { - display: flex; - flex-direction: column; - width: 100%; - margin: 0.25em 0.1em 0.75em 0.1em; - .poll-top { - display: flex; - justify-content: space-between; - width: 100%; - .poll-question { - font-weight: 700; - } - .poll-close { - width: 2em; - height: 1em; - opacity: 0.5; - font-size: 1.2em; - background: transparent url('../img/icon-close.svg') no-repeat center - center; - background-size: contain; - cursor: pointer; - &:hover { - opacity: 1; - } - } - } - .poll-title { - display: flex; - justify-content: space-between; - width: 100%; - opacity: 0.5; - .poll-votes { - margin-right: $gutter-sm; - } - } - } - .opt { - display: block; - align-items: center; - margin-bottom: $gutter-md; - background-color: $color-surface-dark3; - border-radius: 6px; - padding: 4px; - .opt-info { - display: flex; - .opt-vote-number { - height: fit-content; - border-radius: 4px; - padding: 0 0.3em 0 0.3em; - margin: 0 0.3em 0.3em 0; - } - .opt-bar-option { - font-weight: 500; - font-size: 0.85em; - color: $text-color; - margin: 0.1em 0em 0.25em 0; - display: flex; - flex-grow: 1; - } - .opt-bar-value { - font-weight: 500; - font-size: 0.85em; - margin-right: $gutter-sm; - color: $text-color; - white-space: nowrap; - } - } - .opt-bar { - flex: 1; - overflow: hidden; - background-color: $color-surface-dark2; - border-radius: 4px; - max-height: 0.75em; - .opt-bar-inner { - padding: 0 0.25em; - min-height: 0.75em; - box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); - transition: all 750ms; - background-color: $color-darkred; - border-radius: 4px; - } - } - &.opt-marked .opt-info .opt-vote-number { - background-color: $color-darkred; - color: $text-color; - } - } - .poll-footer { - color: $text-color1; - margin: 0.75em 0 0.5em 0; - display: flex; - .poll-timer { - background-color: $color-surface-dark3; - overflow: hidden; - padding: 3px; - flex: 1; - border-radius: 6px; - .poll-timer-inner { - min-height: 0.3em; - box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); - background-color: $color-blue; - border-radius: 4px; - } - } - } - } - &:not(.poll-completed) { - .opt:hover { - cursor: pointer; - background-color: $color-surface-dark2; - } - } - &.poll-completed { - .opt:not(.opt-winner) { - .opt-bar-inner { - background-color: $color-surface-dark4 !important; - } - &.opt-marked { - .opt-info .opt-vote-number { - background-color: $color-surface-dark4; - } - } - } - .opt-winner { - .opt-bar-inner { - background-color: $color-darkgreen !important; - } - &.opt-marked { - .opt-info .opt-vote-number { - background-color: $color-darkgreen !important; - } - } - } - } -} - -#chat.onstreamchat #chat-poll-frame { - display: none !important; -} - -@font-face { - font-family: 'Among Us'; - src: url('../../../fonts/AmongUs-Regular.ttf') format('truetype'); -} - -.tippy-box[data-theme~='dgg'] { - text-align: center; - background-color: white; - color: #000; -} - -.tippy-box[data-theme~='dgg'] > .tippy-svg-arrow { - fill: white; -} diff --git a/assets/demo.js b/assets/demo.js index 5c81dd7c..10ed533c 100644 --- a/assets/demo.js +++ b/assets/demo.js @@ -1,5 +1,5 @@ import $ from 'jquery'; -import './chat/css/style.scss'; +import './chat/css/main.scss'; import Chat from './chat/js/chat'; import embedHtml from './views/embed.html'; import streamHtml from './views/stream.html'; From 1c056b1343383b6ae9cd631d31b5b7c1c29a7335 Mon Sep 17 00:00:00 2001 From: vyneer Date: Tue, 22 Oct 2024 20:30:09 +0300 Subject: [PATCH 02/16] fix: revert main css file name to `style.css` --- assets/chat/css/{main.scss => style.scss} | 0 assets/demo.js | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename assets/chat/css/{main.scss => style.scss} (100%) diff --git a/assets/chat/css/main.scss b/assets/chat/css/style.scss similarity index 100% rename from assets/chat/css/main.scss rename to assets/chat/css/style.scss diff --git a/assets/demo.js b/assets/demo.js index 10ed533c..5c81dd7c 100644 --- a/assets/demo.js +++ b/assets/demo.js @@ -1,5 +1,5 @@ import $ from 'jquery'; -import './chat/css/main.scss'; +import './chat/css/style.scss'; import Chat from './chat/js/chat'; import embedHtml from './views/embed.html'; import streamHtml from './views/stream.html'; From 0dcb370db27a0fadfae585a80b5e254d22e3e165 Mon Sep 17 00:00:00 2001 From: vyneer Date: Tue, 22 Oct 2024 23:55:03 +0300 Subject: [PATCH 03/16] fix: nicer lib imports --- assets/chat/css/style.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/assets/chat/css/style.scss b/assets/chat/css/style.scss index 6860dabb..bd0d0bf7 100644 --- a/assets/chat/css/style.scss +++ b/assets/chat/css/style.scss @@ -1,6 +1,6 @@ -@use '../../../node_modules/normalize.css/normalize.css'; -@use '../../../node_modules/tippy.js/dist/tippy.css'; -@use '../../../node_modules/tippy.js/dist/svg-arrow.css'; +@use '~normalize.css/normalize'; +@use '~tippy.js/dist/tippy'; +@use '~tippy.js/dist/svg-arrow'; @use 'abstracts' as a; @use 'chat'; From ddf11fcd923fa64ca476f86954c9ec18e652319a Mon Sep 17 00:00:00 2001 From: vyneer Date: Tue, 22 Oct 2024 23:57:47 +0300 Subject: [PATCH 04/16] fix: rename `partials` to `components` --- assets/chat/css/{partials => components}/_button.scss | 0 assets/chat/css/{partials => components}/_icon.scss | 0 assets/chat/css/{partials => components}/_index.scss | 0 assets/chat/css/{partials => components}/_tool-button.scss | 0 assets/chat/css/style.scss | 2 +- 5 files changed, 1 insertion(+), 1 deletion(-) rename assets/chat/css/{partials => components}/_button.scss (100%) rename assets/chat/css/{partials => components}/_icon.scss (100%) rename assets/chat/css/{partials => components}/_index.scss (100%) rename assets/chat/css/{partials => components}/_tool-button.scss (100%) diff --git a/assets/chat/css/partials/_button.scss b/assets/chat/css/components/_button.scss similarity index 100% rename from assets/chat/css/partials/_button.scss rename to assets/chat/css/components/_button.scss diff --git a/assets/chat/css/partials/_icon.scss b/assets/chat/css/components/_icon.scss similarity index 100% rename from assets/chat/css/partials/_icon.scss rename to assets/chat/css/components/_icon.scss diff --git a/assets/chat/css/partials/_index.scss b/assets/chat/css/components/_index.scss similarity index 100% rename from assets/chat/css/partials/_index.scss rename to assets/chat/css/components/_index.scss diff --git a/assets/chat/css/partials/_tool-button.scss b/assets/chat/css/components/_tool-button.scss similarity index 100% rename from assets/chat/css/partials/_tool-button.scss rename to assets/chat/css/components/_tool-button.scss diff --git a/assets/chat/css/style.scss b/assets/chat/css/style.scss index bd0d0bf7..6941ec6b 100644 --- a/assets/chat/css/style.scss +++ b/assets/chat/css/style.scss @@ -6,7 +6,7 @@ @use 'chat'; @use 'menus'; @use 'messages'; -@use 'partials'; +@use 'components'; @import url('https://fonts.googleapis.com/css?family=Roboto:400,500,600,700'); From 3543c9af719c895b4eca7c46ec329451657e3998 Mon Sep 17 00:00:00 2001 From: vyneer Date: Tue, 22 Oct 2024 23:59:08 +0300 Subject: [PATCH 05/16] chore: move `form-control` into `components` --- assets/chat/css/{chat => components}/_form-control.scss | 0 assets/chat/css/components/_index.scss | 1 + 2 files changed, 1 insertion(+) rename assets/chat/css/{chat => components}/_form-control.scss (100%) diff --git a/assets/chat/css/chat/_form-control.scss b/assets/chat/css/components/_form-control.scss similarity index 100% rename from assets/chat/css/chat/_form-control.scss rename to assets/chat/css/components/_form-control.scss diff --git a/assets/chat/css/components/_index.scss b/assets/chat/css/components/_index.scss index d42d30e0..8d083dae 100644 --- a/assets/chat/css/components/_index.scss +++ b/assets/chat/css/components/_index.scss @@ -1,3 +1,4 @@ @use 'button'; +@use 'form-control'; @use 'icon'; @use 'tool-button'; From b36d8d785df9b8943d062f3d34d59572b7ce04fe Mon Sep 17 00:00:00 2001 From: vyneer Date: Wed, 23 Oct 2024 00:00:03 +0300 Subject: [PATCH 06/16] chore: move amogus font to main --- assets/chat/css/chat/_output.scss | 5 ----- assets/chat/css/style.scss | 5 +++++ 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/assets/chat/css/chat/_output.scss b/assets/chat/css/chat/_output.scss index 30665508..ab498001 100644 --- a/assets/chat/css/chat/_output.scss +++ b/assets/chat/css/chat/_output.scss @@ -1,10 +1,5 @@ @use '../abstracts/' as a; -@font-face { - font-family: 'Among Us'; - src: url('../../../fonts/AmongUs-Regular.ttf') format('truetype'); -} - #chat-output-frame { flex: 1; overflow: hidden; diff --git a/assets/chat/css/style.scss b/assets/chat/css/style.scss index 6941ec6b..172dcfe2 100644 --- a/assets/chat/css/style.scss +++ b/assets/chat/css/style.scss @@ -10,6 +10,11 @@ @import url('https://fonts.googleapis.com/css?family=Roboto:400,500,600,700'); +@font-face { + font-family: 'Among Us'; + src: url('../../../fonts/AmongUs-Regular.ttf') format('truetype'); +} + *, *::before, *::after { From a3b441684853427e60e0f62bad0e0a824b394768 Mon Sep 17 00:00:00 2001 From: vyneer Date: Wed, 23 Oct 2024 00:04:02 +0300 Subject: [PATCH 07/16] fix: remove `base` message folder, add `modifiers` --- assets/chat/css/messages/_index.scss | 91 +++++++++++++++++- assets/chat/css/messages/base/_index.scss | 94 ------------------- .../{base => modifiers}/_censored.scss | 0 .../{base => modifiers}/_continue.scss | 0 .../{base => modifiers}/_highlight.scss | 0 .../{base => modifiers}/_historical.scss | 0 .../chat/css/messages/modifiers/_index.scss | 9 ++ .../css/messages/{base => modifiers}/_me.scss | 0 .../messages/{base => modifiers}/_own.scss | 0 .../messages/{base => modifiers}/_tagged.scss | 0 10 files changed, 97 insertions(+), 97 deletions(-) delete mode 100644 assets/chat/css/messages/base/_index.scss rename assets/chat/css/messages/{base => modifiers}/_censored.scss (100%) rename assets/chat/css/messages/{base => modifiers}/_continue.scss (100%) rename assets/chat/css/messages/{base => modifiers}/_highlight.scss (100%) rename assets/chat/css/messages/{base => modifiers}/_historical.scss (100%) create mode 100644 assets/chat/css/messages/modifiers/_index.scss rename assets/chat/css/messages/{base => modifiers}/_me.scss (100%) rename assets/chat/css/messages/{base => modifiers}/_own.scss (100%) rename assets/chat/css/messages/{base => modifiers}/_tagged.scss (100%) diff --git a/assets/chat/css/messages/_index.scss b/assets/chat/css/messages/_index.scss index 051d5dad..a6fffff3 100644 --- a/assets/chat/css/messages/_index.scss +++ b/assets/chat/css/messages/_index.scss @@ -1,6 +1,91 @@ -@use 'base'; +@use 'modifiers'; +@use 'ui'; +@use 'user'; @use 'emote'; @use 'event'; @use 'pinned'; -@use 'ui'; -@use 'user'; + +$link-color-map: ( + 'nsfw': a.$color-underline-nsfw, + 'nsfl': a.$color-underline-nsfl, + 'spoilers': a.$color-underline-spoilers, +); + +.msg-chat { + word-wrap: break-word; + padding: a.$gutter-xs a.$gutter-md * 2 a.$gutter-xs a.$gutter-md; + color: a.$color-chat-text2; + + .time { + font-size: 0.8em; + color: a.$color-chat-disabled; + padding-right: a.$gutter-sm; + display: none; /* hidden by default */ + } + + .user { + font-weight: 500; + cursor: pointer; + margin-left: a.$gutter-sm; + color: a.$color-label-user; + } + + .chat-user { + cursor: pointer; + position: relative; + + &:hover { + text-decoration: underline; + } + } + + .greentext { + color: a.$color-green-text; + } + + .sus { + text-transform: uppercase; + font-family: 'Among Us', a.$chat-lines-font; + } + + .externallink { + border-style: solid; + border-color: transparent; + border-width: 1px 0 1px 0; + color: a.$color-link; + position: relative; + + &:visited { + color: a.$color-link-visited; + } + + &:hover, + &:focus { + color: a.$color-link-hover; + } + + @each $type, $color in $link-color-map { + .#{$type}-link { + border-style: dashed; + border-width: 1px 0 1px 0; + border-color: transparent transparent $color transparent; + } + } + } + + .hidden { + display: none !important; + } + + .embed-button { + position: relative; + top: 2.5px; + margin-left: a.$gutter-sm; + margin-right: a.$gutter-xs; + opacity: 0.5; + + &:hover { + opacity: 1; + } + } +} diff --git a/assets/chat/css/messages/base/_index.scss b/assets/chat/css/messages/base/_index.scss deleted file mode 100644 index ee0bf679..00000000 --- a/assets/chat/css/messages/base/_index.scss +++ /dev/null @@ -1,94 +0,0 @@ -@use '../../abstracts/' as a; - -@use 'censored'; -@use 'continue'; -@use 'highlight'; -@use 'historical'; -@use 'me'; -@use 'own'; -@use 'tagged'; - -$link-color-map: ( - 'nsfw': a.$color-underline-nsfw, - 'nsfl': a.$color-underline-nsfl, - 'spoilers': a.$color-underline-spoilers, -); - -.msg-chat { - word-wrap: break-word; - padding: a.$gutter-xs a.$gutter-md * 2 a.$gutter-xs a.$gutter-md; - color: a.$color-chat-text2; - - .time { - font-size: 0.8em; - color: a.$color-chat-disabled; - padding-right: a.$gutter-sm; - display: none; /* hidden by default */ - } - - .user { - font-weight: 500; - cursor: pointer; - margin-left: a.$gutter-sm; - color: a.$color-label-user; - } - - .chat-user { - cursor: pointer; - position: relative; - - &:hover { - text-decoration: underline; - } - } - - .greentext { - color: a.$color-green-text; - } - - .sus { - text-transform: uppercase; - font-family: 'Among Us', a.$chat-lines-font; - } - - .externallink { - border-style: solid; - border-color: transparent; - border-width: 1px 0 1px 0; - color: a.$color-link; - position: relative; - - &:visited { - color: a.$color-link-visited; - } - - &:hover, - &:focus { - color: a.$color-link-hover; - } - - @each $type, $color in $link-color-map { - .#{$type}-link { - border-style: dashed; - border-width: 1px 0 1px 0; - border-color: transparent transparent $color transparent; - } - } - } - - .hidden { - display: none !important; - } - - .embed-button { - position: relative; - top: 2.5px; - margin-left: a.$gutter-sm; - margin-right: a.$gutter-xs; - opacity: 0.5; - - &:hover { - opacity: 1; - } - } -} diff --git a/assets/chat/css/messages/base/_censored.scss b/assets/chat/css/messages/modifiers/_censored.scss similarity index 100% rename from assets/chat/css/messages/base/_censored.scss rename to assets/chat/css/messages/modifiers/_censored.scss diff --git a/assets/chat/css/messages/base/_continue.scss b/assets/chat/css/messages/modifiers/_continue.scss similarity index 100% rename from assets/chat/css/messages/base/_continue.scss rename to assets/chat/css/messages/modifiers/_continue.scss diff --git a/assets/chat/css/messages/base/_highlight.scss b/assets/chat/css/messages/modifiers/_highlight.scss similarity index 100% rename from assets/chat/css/messages/base/_highlight.scss rename to assets/chat/css/messages/modifiers/_highlight.scss diff --git a/assets/chat/css/messages/base/_historical.scss b/assets/chat/css/messages/modifiers/_historical.scss similarity index 100% rename from assets/chat/css/messages/base/_historical.scss rename to assets/chat/css/messages/modifiers/_historical.scss diff --git a/assets/chat/css/messages/modifiers/_index.scss b/assets/chat/css/messages/modifiers/_index.scss new file mode 100644 index 00000000..1be3723c --- /dev/null +++ b/assets/chat/css/messages/modifiers/_index.scss @@ -0,0 +1,9 @@ +@use '../../abstracts/' as a; + +@use 'censored'; +@use 'continue'; +@use 'highlight'; +@use 'historical'; +@use 'me'; +@use 'own'; +@use 'tagged'; diff --git a/assets/chat/css/messages/base/_me.scss b/assets/chat/css/messages/modifiers/_me.scss similarity index 100% rename from assets/chat/css/messages/base/_me.scss rename to assets/chat/css/messages/modifiers/_me.scss diff --git a/assets/chat/css/messages/base/_own.scss b/assets/chat/css/messages/modifiers/_own.scss similarity index 100% rename from assets/chat/css/messages/base/_own.scss rename to assets/chat/css/messages/modifiers/_own.scss diff --git a/assets/chat/css/messages/base/_tagged.scss b/assets/chat/css/messages/modifiers/_tagged.scss similarity index 100% rename from assets/chat/css/messages/base/_tagged.scss rename to assets/chat/css/messages/modifiers/_tagged.scss From 41bd4d3b99c58c53139755a66de5f17de3575313 Mon Sep 17 00:00:00 2001 From: vyneer Date: Wed, 23 Oct 2024 00:10:52 +0300 Subject: [PATCH 08/16] refactor: move chat settings to appropriate styles --- assets/chat/css/chat/_autocomplete.scss | 8 ++++ assets/chat/css/chat/_index.scss | 1 - assets/chat/css/chat/_settings.scss | 50 ---------------------- assets/chat/css/messages/_index.scss | 11 +++++ assets/chat/css/messages/emote/_index.scss | 9 ++++ assets/chat/css/messages/user/_index.scss | 4 ++ assets/chat/css/style.scss | 14 ++++++ 7 files changed, 46 insertions(+), 51 deletions(-) delete mode 100644 assets/chat/css/chat/_settings.scss diff --git a/assets/chat/css/chat/_autocomplete.scss b/assets/chat/css/chat/_autocomplete.scss index e4b4ae11..922b02e0 100644 --- a/assets/chat/css/chat/_autocomplete.scss +++ b/assets/chat/css/chat/_autocomplete.scss @@ -55,3 +55,11 @@ } } } + +#chat:not(.pref-autocompletehelper) #chat-auto-complete { + display: none; +} + +.pref-autocompletehelper #chat-auto-complete.active { + display: block; +} diff --git a/assets/chat/css/chat/_index.scss b/assets/chat/css/chat/_index.scss index c4e5f09d..773c9a56 100644 --- a/assets/chat/css/chat/_index.scss +++ b/assets/chat/css/chat/_index.scss @@ -9,7 +9,6 @@ @use 'output'; @use 'scroll-notify'; @use 'scrollbar-theme'; -@use 'settings'; @use 'toolbar'; @use 'window-select'; diff --git a/assets/chat/css/chat/_settings.scss b/assets/chat/css/chat/_settings.scss deleted file mode 100644 index e9aa5bbe..00000000 --- a/assets/chat/css/chat/_settings.scss +++ /dev/null @@ -1,50 +0,0 @@ -// show time -.pref-showtime .time { - display: inline !important; -} - -// show flairs -.pref-hideflairicons .features { - display: none !important; -} - -// show autocomplete helper -#chat:not(.pref-autocompletehelper) #chat-auto-complete { - display: none !important; -} - -.pref-autocompletehelper #chat-auto-complete.active { - display: block !important; -} - -// disable animations -.pref-disableanimations { - .emote, - .emote:hover, - .emote::before, - .emote::after { - animation: none !important; - } - - a.user, - span.user { - animation: none !important; - } -} - -// font size -body { - &.pref-fontscale { - &[data-fontscale='small'] { - font-size: 14px; - } - - &[data-fontscale='medium'] { - font-size: 15px; - } - - &[data-fontscale='large'] { - font-size: 16px; - } - } -} diff --git a/assets/chat/css/messages/_index.scss b/assets/chat/css/messages/_index.scss index a6fffff3..8cfa75d4 100644 --- a/assets/chat/css/messages/_index.scss +++ b/assets/chat/css/messages/_index.scss @@ -89,3 +89,14 @@ $link-color-map: ( } } } + +.pref-showtime .time { + display: inline; +} + +.pref-disableanimations { + a.user, + span.user { + animation: none !important; + } +} diff --git a/assets/chat/css/messages/emote/_index.scss b/assets/chat/css/messages/emote/_index.scss index f307b345..bc379d1f 100644 --- a/assets/chat/css/messages/emote/_index.scss +++ b/assets/chat/css/messages/emote/_index.scss @@ -6,3 +6,12 @@ overflow: hidden; text-indent: -999em; } + +.pref-disableanimations { + .emote, + .emote:hover, + .emote::before, + .emote::after { + animation: none !important; + } +} diff --git a/assets/chat/css/messages/user/_index.scss b/assets/chat/css/messages/user/_index.scss index 684f96eb..4ea27e3e 100644 --- a/assets/chat/css/messages/user/_index.scss +++ b/assets/chat/css/messages/user/_index.scss @@ -16,3 +16,7 @@ margin-left: a.$gutter-xs; } } + +.pref-hideflairicons .features { + display: none; +} diff --git a/assets/chat/css/style.scss b/assets/chat/css/style.scss index 172dcfe2..79f49718 100644 --- a/assets/chat/css/style.scss +++ b/assets/chat/css/style.scss @@ -48,6 +48,20 @@ body { height: 100%; margin: 0; padding: 0; + + &.pref-fontscale { + &[data-fontscale='small'] { + font-size: 14px; + } + + &[data-fontscale='medium'] { + font-size: 15px; + } + + &[data-fontscale='large'] { + font-size: 16px; + } + } } textarea, From 14ffa2a19c7e4254f35c81b4b8f1a4e94fb7f95c Mon Sep 17 00:00:00 2001 From: vyneer Date: Wed, 23 Oct 2024 00:46:16 +0300 Subject: [PATCH 09/16] fix: add abstracts to messages index file --- assets/chat/css/messages/_index.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/assets/chat/css/messages/_index.scss b/assets/chat/css/messages/_index.scss index 8cfa75d4..321cdef5 100644 --- a/assets/chat/css/messages/_index.scss +++ b/assets/chat/css/messages/_index.scss @@ -1,3 +1,5 @@ +@use '../abstracts' as a; + @use 'modifiers'; @use 'ui'; @use 'user'; From 972e88f4d4417289691c831de721bae3a988e26e Mon Sep 17 00:00:00 2001 From: vyneer Date: Wed, 23 Oct 2024 00:46:36 +0300 Subject: [PATCH 10/16] fix: remove form-control import from chat --- assets/chat/css/chat/_index.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/assets/chat/css/chat/_index.scss b/assets/chat/css/chat/_index.scss index 773c9a56..e98244d8 100644 --- a/assets/chat/css/chat/_index.scss +++ b/assets/chat/css/chat/_index.scss @@ -1,7 +1,6 @@ @use '../abstracts/' as a; @use 'autocomplete'; -@use 'form-control'; @use 'input'; @use 'loading-screen'; @use 'login-screen'; From d2c66948e2dc655fcdedd972033b9d308c764686 Mon Sep 17 00:00:00 2001 From: vyneer Date: Wed, 23 Oct 2024 02:08:52 +0300 Subject: [PATCH 11/16] refactor: move onstreamchat styles to appropriate files --- assets/chat/css/chat/_index.scss | 7 +- assets/chat/css/chat/_onstreamchat.scss | 202 ------------------ assets/chat/css/chat/_output.scss | 13 ++ assets/chat/css/chat/_scrollbar-theme.scss | 6 + assets/chat/css/menus/_poll.scss | 6 + assets/chat/css/messages/_index.scss | 34 +++ assets/chat/css/messages/emote/_combo.scss | 10 + assets/chat/css/messages/event/_index.scss | 42 ++++ .../css/messages/modifiers/_continue.scss | 6 + assets/chat/css/messages/pinned/_frame.scss | 6 + assets/chat/css/messages/pinned/_index.scss | 18 ++ assets/chat/css/messages/ui/_index.scss | 6 + assets/chat/css/messages/ui/_info.scss | 6 + assets/chat/css/messages/ui/_status.scss | 6 + assets/chat/css/messages/user/_index.scss | 19 ++ assets/chat/css/style.scss | 21 ++ 16 files changed, 205 insertions(+), 203 deletions(-) delete mode 100644 assets/chat/css/chat/_onstreamchat.scss diff --git a/assets/chat/css/chat/_index.scss b/assets/chat/css/chat/_index.scss index e98244d8..9c202515 100644 --- a/assets/chat/css/chat/_index.scss +++ b/assets/chat/css/chat/_index.scss @@ -4,7 +4,6 @@ @use 'input'; @use 'loading-screen'; @use 'login-screen'; -@use 'onstreamchat'; @use 'output'; @use 'scroll-notify'; @use 'scrollbar-theme'; @@ -20,3 +19,9 @@ height: 100%; overflow: hidden; } + +.onstreamchat { + #chat { + background: none !important; + } +} diff --git a/assets/chat/css/chat/_onstreamchat.scss b/assets/chat/css/chat/_onstreamchat.scss deleted file mode 100644 index 415c4989..00000000 --- a/assets/chat/css/chat/_onstreamchat.scss +++ /dev/null @@ -1,202 +0,0 @@ -@use '../abstracts/' as a; - -.onstreamchat { - .chat-lines { - font-size: 1.5em; - } - - #chat, - .msg-chat, - .msg-chat:not(.rainbow-border):before, - .greentext { - background: none !important; - } - - .chat-combo { - background-image: none !important; - } - - .chat-lines { - font-family: 'Roboto', Helvetica, 'Trebuchet MS', Verdana, sans-serif; - font-weight: 500 !important; - } - - #chat-output-frame { - margin: 0; - } - - #chat-pinned-frame { - display: none !important; - } - - // Donations, subs and broadcasts - .msg-donation, - .msg-subscription, - .msg-giftsub, - .msg-massgift, - .msg-broadcast { - text-shadow: none; - padding: 0; - border-style: none none none solid; - border-width: 6px; - border-radius: 0; - - .event-top, - .event-bottom { - padding: 0 0 0 a.$gutter-md; - background: none; - } - - &.rainbow-border { - border-style: none none none solid; - border-width: 6px; - border-radius: 0; - - &:before { - content: ''; - position: absolute; - top: unset; - right: 100%; - bottom: unset; - left: unset; - z-index: -1; - margin: -1px 0 0 0; - border-radius: inherit; - background: var(--rainbow-gradient); - aspect-ratio: 1/1; - height: 100%; - transform: rotate(90deg); - } - } - } - - time, - .time, - .features, - .msg-ui, - .msg-info, - .msg-chat .text:before { - display: none !important; - } - - .continue, - .os-scrollbar { - visibility: hidden !important; - } - - .chat-lines, - .msg-chat, - .greentext, - .combo { - color: a.$text-color; - } - - .msg-pinned { - position: unset; - text-shadow: unset; - background-color: unset; - font-size: unset; - font-weight: unset; - padding-top: unset; - padding-bottom: unset; - box-shadow: unset; - border-radius: unset; - - .chat-tool-btn { - display: none !important; - } - } - - .msg-chat { - margin: 0; - padding: 1px 20px 1px 5px; - filter: drop-shadow(-1px -1px 0 rgba(black, 0.5)) - drop-shadow(1px -1px 0 rgba(black, 0.5)) - drop-shadow(-1px 1px 0 rgba(black, 0.5)) - drop-shadow(1px 1px 0 rgba(black, 0.5)); - letter-spacing: 0.03em; - } - - .msg-user, - .msg-status { - animation: msg-slide-in 0.15s cubic-bezier(0.72, 0.03, 0.45, 1); - } - - a.externallink, - a.externallink:hover { - color: a.$color-accent-light; - } - - #chat-poll-frame { - display: none !important; - } -} - -body.pref-fontscale[data-fontscale='1'] { - .onstreamchat { - font-size: 14px; - } -} - -body.pref-fontscale[data-fontscale='2'] { - .onstreamchat { - font-size: 15px; - } -} - -body.pref-fontscale[data-fontscale='3'] { - .onstreamchat { - font-size: 16px; - } -} - -body.pref-fontscale[data-fontscale='4'] { - .onstreamchat { - font-size: 18px; - } -} - -body.pref-fontscale[data-fontscale='5'] { - .onstreamchat { - font-size: 20px; - } -} - -body.pref-fontscale[data-fontscale='6'] { - .onstreamchat { - font-size: 22px; - } -} - -body.pref-fontscale[data-fontscale='7'] { - .onstreamchat { - font-size: 24px; - } -} - -body.pref-fontscale[data-fontscale='8'] { - .onstreamchat { - font-size: 26px; - } -} - -body.pref-fontscale[data-fontscale='9'] { - .onstreamchat { - font-size: 32px; - } -} - -body.pref-fontscale[data-fontscale='10'] { - .onstreamchat { - font-size: 52px; - } -} - -@keyframes msg-slide-in { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} diff --git a/assets/chat/css/chat/_output.scss b/assets/chat/css/chat/_output.scss index ab498001..89998b70 100644 --- a/assets/chat/css/chat/_output.scss +++ b/assets/chat/css/chat/_output.scss @@ -16,3 +16,16 @@ line-height: 1.65em; outline: 0 !important; } + +.onstreamchat { + .chat-lines { + font-size: 1.5em; + font-family: 'Roboto', Helvetica, 'Trebuchet MS', Verdana, sans-serif; + font-weight: 500 !important; + color: a.$text-color; + } + + #chat-output-frame { + margin: 0; + } +} diff --git a/assets/chat/css/chat/_scrollbar-theme.scss b/assets/chat/css/chat/_scrollbar-theme.scss index 49027a82..4f8d4d01 100644 --- a/assets/chat/css/chat/_scrollbar-theme.scss +++ b/assets/chat/css/chat/_scrollbar-theme.scss @@ -87,3 +87,9 @@ right: -6px; left: -2px; } + +.onstreamchat { + .os-scrollbar { + visibility: hidden !important; + } +} diff --git a/assets/chat/css/menus/_poll.scss b/assets/chat/css/menus/_poll.scss index accd4bbf..79947bbd 100644 --- a/assets/chat/css/menus/_poll.scss +++ b/assets/chat/css/menus/_poll.scss @@ -173,3 +173,9 @@ color: a.$text-color; } } + +.onstreamchat { + #chat-poll-frame { + display: none !important; + } +} diff --git a/assets/chat/css/messages/_index.scss b/assets/chat/css/messages/_index.scss index 321cdef5..757d1ef6 100644 --- a/assets/chat/css/messages/_index.scss +++ b/assets/chat/css/messages/_index.scss @@ -102,3 +102,37 @@ $link-color-map: ( animation: none !important; } } + +.onstreamchat { + .msg-chat { + color: a.$text-color; + margin: 0; + padding: 1px 20px 1px 5px; + filter: drop-shadow(-1px -1px 0 rgba(black, 0.5)) + drop-shadow(1px -1px 0 rgba(black, 0.5)) + drop-shadow(-1px 1px 0 rgba(black, 0.5)) + drop-shadow(1px 1px 0 rgba(black, 0.5)); + letter-spacing: 0.03em; + } + + a.externallink, + a.externallink:hover { + color: a.$color-accent-light; + } + + .greentext { + color: a.$text-color; + } + + .msg-chat, + .msg-chat:not(.rainbow-border):before, + .greentext { + background: none !important; + } + + time, + .time, + .msg-chat .text:before { + display: none !important; + } +} diff --git a/assets/chat/css/messages/emote/_combo.scss b/assets/chat/css/messages/emote/_combo.scss index e3b791f5..dbef0908 100644 --- a/assets/chat/css/messages/emote/_combo.scss +++ b/assets/chat/css/messages/emote/_combo.scss @@ -120,6 +120,16 @@ } } +.onstreamchat { + .chat-combo { + background-image: none !important; + } + + .combo { + color: a.$text-color; + } +} + @keyframes emote-hit { 0% { color: #b91010; diff --git a/assets/chat/css/messages/event/_index.scss b/assets/chat/css/messages/event/_index.scss index 82c555bd..afc87410 100644 --- a/assets/chat/css/messages/event/_index.scss +++ b/assets/chat/css/messages/event/_index.scss @@ -82,3 +82,45 @@ } } } + +.onstreamchat { + .msg-donation, + .msg-subscription, + .msg-giftsub, + .msg-massgift, + .msg-broadcast { + text-shadow: none; + padding: 0; + border-style: none none none solid; + border-width: 6px; + border-radius: 0; + + .event-top, + .event-bottom { + padding: 0 0 0 a.$gutter-md; + background: none; + } + + &.rainbow-border { + border-style: none none none solid; + border-width: 6px; + border-radius: 0; + + &:before { + content: ''; + position: absolute; + top: unset; + right: 100%; + bottom: unset; + left: unset; + z-index: -1; + margin: -1px 0 0 0; + border-radius: inherit; + background: var(--rainbow-gradient); + aspect-ratio: 1/1; + height: 100%; + transform: rotate(90deg); + } + } + } +} diff --git a/assets/chat/css/messages/modifiers/_continue.scss b/assets/chat/css/messages/modifiers/_continue.scss index fcc128ac..d3a940e9 100644 --- a/assets/chat/css/messages/modifiers/_continue.scss +++ b/assets/chat/css/messages/modifiers/_continue.scss @@ -11,3 +11,9 @@ display: none; } } + +.onstreamchat { + .continue { + visibility: hidden !important; + } +} diff --git a/assets/chat/css/messages/pinned/_frame.scss b/assets/chat/css/messages/pinned/_frame.scss index 1af1c274..68bab783 100644 --- a/assets/chat/css/messages/pinned/_frame.scss +++ b/assets/chat/css/messages/pinned/_frame.scss @@ -36,3 +36,9 @@ opacity: 1; } } + +.onstreamchat { + #chat-pinned-frame { + display: none !important; + } +} diff --git a/assets/chat/css/messages/pinned/_index.scss b/assets/chat/css/messages/pinned/_index.scss index 5cbb6700..3660a96b 100644 --- a/assets/chat/css/messages/pinned/_index.scss +++ b/assets/chat/css/messages/pinned/_index.scss @@ -49,3 +49,21 @@ @include a.icon-background('../img/icon-unpin.svg'); } } + +.onstreamchat { + .msg-pinned { + position: unset; + text-shadow: unset; + background-color: unset; + font-size: unset; + font-weight: unset; + padding-top: unset; + padding-bottom: unset; + box-shadow: unset; + border-radius: unset; + + .chat-tool-btn { + display: none !important; + } + } +} diff --git a/assets/chat/css/messages/ui/_index.scss b/assets/chat/css/messages/ui/_index.scss index cfbb8d88..97d9d692 100644 --- a/assets/chat/css/messages/ui/_index.scss +++ b/assets/chat/css/messages/ui/_index.scss @@ -23,3 +23,9 @@ content: ''; } } + +.onstreamchat { + .msg-ui { + display: none !important; + } +} diff --git a/assets/chat/css/messages/ui/_info.scss b/assets/chat/css/messages/ui/_info.scss index 96d5dd32..ed9c17a2 100644 --- a/assets/chat/css/messages/ui/_info.scss +++ b/assets/chat/css/messages/ui/_info.scss @@ -7,3 +7,9 @@ .msg-info .text:before { @include a.msg-icon(-50px, -0px); } + +.onstreamchat { + .msg-info { + display: none !important; + } +} diff --git a/assets/chat/css/messages/ui/_status.scss b/assets/chat/css/messages/ui/_status.scss index f179af18..9ca21af7 100644 --- a/assets/chat/css/messages/ui/_status.scss +++ b/assets/chat/css/messages/ui/_status.scss @@ -3,3 +3,9 @@ .msg-status .text:before { @include a.msg-icon(-50px, -18px); } + +.onstreamchat { + .msg-status { + animation: msg-slide-in 0.15s cubic-bezier(0.72, 0.03, 0.45, 1); + } +} diff --git a/assets/chat/css/messages/user/_index.scss b/assets/chat/css/messages/user/_index.scss index 4ea27e3e..c3c6fa44 100644 --- a/assets/chat/css/messages/user/_index.scss +++ b/assets/chat/css/messages/user/_index.scss @@ -20,3 +20,22 @@ .pref-hideflairicons .features { display: none; } + +.onstreamchat { + .msg-user { + animation: msg-slide-in 0.15s cubic-bezier(0.72, 0.03, 0.45, 1); + } + + .features { + display: none !important; + } +} + +@keyframes msg-slide-in { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} diff --git a/assets/chat/css/style.scss b/assets/chat/css/style.scss index 79f49718..d6b7377a 100644 --- a/assets/chat/css/style.scss +++ b/assets/chat/css/style.scss @@ -158,3 +158,24 @@ hr { font-size: 16px; } } + +$num-size-map: ( + 1: 14px, + 2: 15px, + 3: 16px, + 4: 18px, + 5: 20px, + 6: 22px, + 7: 24px, + 8: 26px, + 9: 32px, + 10: 52px, +); + +.onstreamchat { + @each $num, $size in $num-size-map { + body.pref-fontscale[data-fontscale='#{$size}'] & { + font-size: #{$size}; + } + } +} From 7ab3574a156f710c3f5007c98f9b77cbc7db8471 Mon Sep 17 00:00:00 2001 From: vyneer Date: Wed, 23 Oct 2024 02:10:23 +0300 Subject: [PATCH 12/16] fix: split certain files to avoid ordering issues --- assets/chat/css/messages/_base.scss | 131 ++++++++++++++++++++ assets/chat/css/messages/_index.scss | 132 +-------------------- assets/chat/css/messages/event/_event.scss | 122 +++++++++++++++++++ assets/chat/css/messages/event/_index.scss | 123 +------------------ 4 files changed, 257 insertions(+), 251 deletions(-) create mode 100644 assets/chat/css/messages/_base.scss create mode 100644 assets/chat/css/messages/event/_event.scss diff --git a/assets/chat/css/messages/_base.scss b/assets/chat/css/messages/_base.scss new file mode 100644 index 00000000..c93bbd39 --- /dev/null +++ b/assets/chat/css/messages/_base.scss @@ -0,0 +1,131 @@ +@use '../abstracts' as a; + +$link-color-map: ( + 'nsfw': a.$color-underline-nsfw, + 'nsfl': a.$color-underline-nsfl, + 'spoilers': a.$color-underline-spoilers, +); + +.msg-chat { + word-wrap: break-word; + padding: a.$gutter-xs a.$gutter-md * 2 a.$gutter-xs a.$gutter-md; + color: a.$color-chat-text2; + + .time { + font-size: 0.8em; + color: a.$color-chat-disabled; + padding-right: a.$gutter-sm; + display: none; /* hidden by default */ + } + + .user { + font-weight: 500; + cursor: pointer; + margin-left: a.$gutter-sm; + color: a.$color-label-user; + } + + .chat-user { + cursor: pointer; + position: relative; + + &:hover { + text-decoration: underline; + } + } + + .greentext { + color: a.$color-green-text; + } + + .sus { + text-transform: uppercase; + font-family: 'Among Us', a.$chat-lines-font; + } + + .externallink { + border-style: solid; + border-color: transparent; + border-width: 1px 0 1px 0; + color: a.$color-link; + position: relative; + + &:visited { + color: a.$color-link-visited; + } + + &:hover, + &:focus { + color: a.$color-link-hover; + } + + @each $type, $color in $link-color-map { + .#{$type}-link { + border-style: dashed; + border-width: 1px 0 1px 0; + border-color: transparent transparent $color transparent; + } + } + } + + .hidden { + display: none !important; + } + + .embed-button { + position: relative; + top: 2.5px; + margin-left: a.$gutter-sm; + margin-right: a.$gutter-xs; + opacity: 0.5; + + &:hover { + opacity: 1; + } + } +} + +.pref-showtime .time { + display: inline; +} + +.pref-disableanimations { + a.user, + span.user { + animation: none !important; + } +} + +.onstreamchat { + .msg-chat { + color: a.$text-color; + margin: 0; + padding: 1px 20px 1px 5px; + filter: drop-shadow(-1px -1px 0 rgba(black, 0.5)) + drop-shadow(1px -1px 0 rgba(black, 0.5)) + drop-shadow(-1px 1px 0 rgba(black, 0.5)) + drop-shadow(1px 1px 0 rgba(black, 0.5)); + letter-spacing: 0.03em; + } + + a.externallink, + a.externallink:hover { + color: a.$color-accent-light; + } + + .greentext { + color: a.$text-color; + } + + .msg-chat, + .msg-chat:not(.rainbow-border):before, + .greentext { + background: none !important; + } + + time, + .time, + .msg-chat .text:before { + display: none !important; + } +} diff --git a/assets/chat/css/messages/_index.scss b/assets/chat/css/messages/_index.scss index 757d1ef6..ed44312a 100644 --- a/assets/chat/css/messages/_index.scss +++ b/assets/chat/css/messages/_index.scss @@ -1,138 +1,10 @@ @use '../abstracts' as a; +@use 'base'; + @use 'modifiers'; @use 'ui'; @use 'user'; @use 'emote'; @use 'event'; @use 'pinned'; - -$link-color-map: ( - 'nsfw': a.$color-underline-nsfw, - 'nsfl': a.$color-underline-nsfl, - 'spoilers': a.$color-underline-spoilers, -); - -.msg-chat { - word-wrap: break-word; - padding: a.$gutter-xs a.$gutter-md * 2 a.$gutter-xs a.$gutter-md; - color: a.$color-chat-text2; - - .time { - font-size: 0.8em; - color: a.$color-chat-disabled; - padding-right: a.$gutter-sm; - display: none; /* hidden by default */ - } - - .user { - font-weight: 500; - cursor: pointer; - margin-left: a.$gutter-sm; - color: a.$color-label-user; - } - - .chat-user { - cursor: pointer; - position: relative; - - &:hover { - text-decoration: underline; - } - } - - .greentext { - color: a.$color-green-text; - } - - .sus { - text-transform: uppercase; - font-family: 'Among Us', a.$chat-lines-font; - } - - .externallink { - border-style: solid; - border-color: transparent; - border-width: 1px 0 1px 0; - color: a.$color-link; - position: relative; - - &:visited { - color: a.$color-link-visited; - } - - &:hover, - &:focus { - color: a.$color-link-hover; - } - - @each $type, $color in $link-color-map { - .#{$type}-link { - border-style: dashed; - border-width: 1px 0 1px 0; - border-color: transparent transparent $color transparent; - } - } - } - - .hidden { - display: none !important; - } - - .embed-button { - position: relative; - top: 2.5px; - margin-left: a.$gutter-sm; - margin-right: a.$gutter-xs; - opacity: 0.5; - - &:hover { - opacity: 1; - } - } -} - -.pref-showtime .time { - display: inline; -} - -.pref-disableanimations { - a.user, - span.user { - animation: none !important; - } -} - -.onstreamchat { - .msg-chat { - color: a.$text-color; - margin: 0; - padding: 1px 20px 1px 5px; - filter: drop-shadow(-1px -1px 0 rgba(black, 0.5)) - drop-shadow(1px -1px 0 rgba(black, 0.5)) - drop-shadow(-1px 1px 0 rgba(black, 0.5)) - drop-shadow(1px 1px 0 rgba(black, 0.5)); - letter-spacing: 0.03em; - } - - a.externallink, - a.externallink:hover { - color: a.$color-accent-light; - } - - .greentext { - color: a.$text-color; - } - - .msg-chat, - .msg-chat:not(.rainbow-border):before, - .greentext { - background: none !important; - } - - time, - .time, - .msg-chat .text:before { - display: none !important; - } -} diff --git a/assets/chat/css/messages/event/_event.scss b/assets/chat/css/messages/event/_event.scss new file mode 100644 index 00000000..a80ead6d --- /dev/null +++ b/assets/chat/css/messages/event/_event.scss @@ -0,0 +1,122 @@ +@use '../../abstracts/' as a; + +.msg-donation, +.msg-subscription, +.msg-giftsub, +.msg-massgift, +.msg-broadcast { + text-shadow: 1px 1px 3px rgba(0, 0, 0, 1); + font-size: 1.1em; + font-weight: 400; + padding: unset; + border-radius: 10px; + border-style: solid; + border-color: unset; + border-width: 3px; + display: flex; + flex-direction: column; + margin: a.$gutter-sm a.$gutter-md * 2 a.$gutter-sm a.$gutter-sm; + + .event-wrapper { + border-radius: 10px; + } + + .event-top { + display: flex; + padding: a.$gutter-xs a.$gutter-md * 2 a.$gutter-xs a.$gutter-md; + background-color: a.$color-chat-emphasize; + justify-content: space-between; + align-items: center; + border-top-right-radius: 10px; + border-top-left-radius: 10px; + } + + .event-icon { + width: 2.25em; + height: 2.25em; + color: a.$color-chat-disabled; + position: relative; + text-decoration: none; + display: inline-block; + border: 0.25em solid transparent; + flex-shrink: 0; + opacity: 0.75; + } + + .event-bottom { + padding: a.$gutter-xs a.$gutter-md * 2 a.$gutter-xs a.$gutter-md; + background-color: a.$color-chat-bg; + border-bottom-right-radius: 10px; + border-bottom-left-radius: 10px; + } + + &:not(:has(.event-bottom)) { + .event-top { + border-bottom-right-radius: 10px; + border-bottom-left-radius: 10px; + } + } + + .user { + margin-left: unset; + text-shadow: none; + } + + &.censored { + .text { + display: none; + } + + .event-bottom:after { + color: a.$color-accent; + cursor: pointer; + content: ''; + } + + .event-bottom:hover:after { + color: a.$color-accent-light; + } + } +} + +.onstreamchat { + .msg-donation, + .msg-subscription, + .msg-giftsub, + .msg-massgift, + .msg-broadcast { + text-shadow: none; + padding: 0; + border-style: none none none solid; + border-width: 6px; + border-radius: 0; + + .event-top, + .event-bottom { + padding: 0 0 0 a.$gutter-md; + background: none; + } + + &.rainbow-border { + border-style: none none none solid; + border-width: 6px; + border-radius: 0; + + &:before { + content: ''; + position: absolute; + top: unset; + right: 100%; + bottom: unset; + left: unset; + z-index: -1; + margin: -1px 0 0 0; + border-radius: inherit; + background: var(--rainbow-gradient); + aspect-ratio: 1/1; + height: 100%; + transform: rotate(90deg); + } + } + } +} diff --git a/assets/chat/css/messages/event/_index.scss b/assets/chat/css/messages/event/_index.scss index afc87410..64166156 100644 --- a/assets/chat/css/messages/event/_index.scss +++ b/assets/chat/css/messages/event/_index.scss @@ -1,126 +1,7 @@ @use '../../abstracts/' as a; +@use 'event'; + @use 'broadcast'; @use 'donation'; @use 'subscription'; - -.msg-donation, -.msg-subscription, -.msg-giftsub, -.msg-massgift, -.msg-broadcast { - text-shadow: 1px 1px 3px rgba(0, 0, 0, 1); - font-size: 1.1em; - font-weight: 400; - padding: unset; - border-radius: 10px; - border-style: solid; - border-color: unset; - border-width: 3px; - display: flex; - flex-direction: column; - margin: a.$gutter-sm a.$gutter-md * 2 a.$gutter-sm a.$gutter-sm; - - .event-wrapper { - border-radius: 10px; - } - - .event-top { - display: flex; - padding: a.$gutter-xs a.$gutter-md * 2 a.$gutter-xs a.$gutter-md; - background-color: a.$color-chat-emphasize; - justify-content: space-between; - align-items: center; - border-top-right-radius: 10px; - border-top-left-radius: 10px; - } - - .event-icon { - width: 2.25em; - height: 2.25em; - color: a.$color-chat-disabled; - position: relative; - text-decoration: none; - display: inline-block; - border: 0.25em solid transparent; - flex-shrink: 0; - opacity: 0.75; - } - - .event-bottom { - padding: a.$gutter-xs a.$gutter-md * 2 a.$gutter-xs a.$gutter-md; - background-color: a.$color-chat-bg; - border-bottom-right-radius: 10px; - border-bottom-left-radius: 10px; - } - - &:not(:has(.event-bottom)) { - .event-top { - border-bottom-right-radius: 10px; - border-bottom-left-radius: 10px; - } - } - - .user { - margin-left: unset; - text-shadow: none; - } - - &.censored { - .text { - display: none; - } - - .event-bottom:after { - color: a.$color-accent; - cursor: pointer; - content: ''; - } - - .event-bottom:hover:after { - color: a.$color-accent-light; - } - } -} - -.onstreamchat { - .msg-donation, - .msg-subscription, - .msg-giftsub, - .msg-massgift, - .msg-broadcast { - text-shadow: none; - padding: 0; - border-style: none none none solid; - border-width: 6px; - border-radius: 0; - - .event-top, - .event-bottom { - padding: 0 0 0 a.$gutter-md; - background: none; - } - - &.rainbow-border { - border-style: none none none solid; - border-width: 6px; - border-radius: 0; - - &:before { - content: ''; - position: absolute; - top: unset; - right: 100%; - bottom: unset; - left: unset; - z-index: -1; - margin: -1px 0 0 0; - border-radius: inherit; - background: var(--rainbow-gradient); - aspect-ratio: 1/1; - height: 100%; - transform: rotate(90deg); - } - } - } -} From 71f9d5a29076b8ea34ff0f909a392fa1c4b18c6b Mon Sep 17 00:00:00 2001 From: vyneer Date: Wed, 23 Oct 2024 02:23:28 +0300 Subject: [PATCH 13/16] refactor: move onstreamchat animation to mixin --- assets/chat/css/abstracts/_mixins.scss | 13 +++++++++++++ assets/chat/css/messages/ui/_status.scss | 2 +- assets/chat/css/messages/user/_index.scss | 11 +---------- 3 files changed, 15 insertions(+), 11 deletions(-) diff --git a/assets/chat/css/abstracts/_mixins.scss b/assets/chat/css/abstracts/_mixins.scss index ac0ab100..3ff8ad0d 100644 --- a/assets/chat/css/abstracts/_mixins.scss +++ b/assets/chat/css/abstracts/_mixins.scss @@ -9,3 +9,16 @@ height: $height; background-position: $posX $posY; } + +@mixin slide-in { + animation: msg-slide-in 0.15s cubic-bezier(0.72, 0.03, 0.45, 1); +} + +@keyframes msg-slide-in { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} diff --git a/assets/chat/css/messages/ui/_status.scss b/assets/chat/css/messages/ui/_status.scss index 9ca21af7..f6065de6 100644 --- a/assets/chat/css/messages/ui/_status.scss +++ b/assets/chat/css/messages/ui/_status.scss @@ -6,6 +6,6 @@ .onstreamchat { .msg-status { - animation: msg-slide-in 0.15s cubic-bezier(0.72, 0.03, 0.45, 1); + @include a.slide-in; } } diff --git a/assets/chat/css/messages/user/_index.scss b/assets/chat/css/messages/user/_index.scss index c3c6fa44..24a96d82 100644 --- a/assets/chat/css/messages/user/_index.scss +++ b/assets/chat/css/messages/user/_index.scss @@ -23,19 +23,10 @@ .onstreamchat { .msg-user { - animation: msg-slide-in 0.15s cubic-bezier(0.72, 0.03, 0.45, 1); + @include a.slide-in; } .features { display: none !important; } } - -@keyframes msg-slide-in { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} From 144df6f78f54be0fd4c638f6076dd95e194f1e5d Mon Sep 17 00:00:00 2001 From: vyneer Date: Wed, 23 Oct 2024 02:28:41 +0300 Subject: [PATCH 14/16] fix: bring back focus styles --- assets/chat/css/messages/_base.scss | 4 ++++ assets/chat/css/messages/emote/_index.scss | 11 +++++++++++ assets/chat/css/messages/pinned/_index.scss | 4 ++++ assets/chat/css/messages/user/_death.scss | 11 +++++++++++ assets/chat/css/messages/user/_index.scss | 11 +++++++++++ 5 files changed, 41 insertions(+) diff --git a/assets/chat/css/messages/_base.scss b/assets/chat/css/messages/_base.scss index c93bbd39..c5ff9fb5 100644 --- a/assets/chat/css/messages/_base.scss +++ b/assets/chat/css/messages/_base.scss @@ -83,6 +83,10 @@ $link-color-map: ( opacity: 1; } } + + .focus & { + opacity: 0.3; + } } .pref-showtime .time { diff --git a/assets/chat/css/messages/emote/_index.scss b/assets/chat/css/messages/emote/_index.scss index bc379d1f..33bd419a 100644 --- a/assets/chat/css/messages/emote/_index.scss +++ b/assets/chat/css/messages/emote/_index.scss @@ -7,6 +7,17 @@ text-indent: -999em; } +.watching-focus:not(.focus) { + .msg-emote { + opacity: 0.3; + + &.watching-same, + &.msg-highlight { + opacity: 1; + } + } +} + .pref-disableanimations { .emote, .emote:hover, diff --git a/assets/chat/css/messages/pinned/_index.scss b/assets/chat/css/messages/pinned/_index.scss index 3660a96b..92f7438b 100644 --- a/assets/chat/css/messages/pinned/_index.scss +++ b/assets/chat/css/messages/pinned/_index.scss @@ -48,6 +48,10 @@ #unpin-btn .btn-icon { @include a.icon-background('../img/icon-unpin.svg'); } + + .focus & { + opacity: 1; + } } .onstreamchat { diff --git a/assets/chat/css/messages/user/_death.scss b/assets/chat/css/messages/user/_death.scss index c2597a4b..72c4d5d3 100644 --- a/assets/chat/css/messages/user/_death.scss +++ b/assets/chat/css/messages/user/_death.scss @@ -14,3 +14,14 @@ @include a.msg-icon(-32px, -0px); } } + +.watching-focus:not(.focus) { + .msg-death { + opacity: 0.3; + + &.watching-same, + &.msg-highlight { + opacity: 1; + } + } +} diff --git a/assets/chat/css/messages/user/_index.scss b/assets/chat/css/messages/user/_index.scss index 24a96d82..83ed7413 100644 --- a/assets/chat/css/messages/user/_index.scss +++ b/assets/chat/css/messages/user/_index.scss @@ -17,6 +17,17 @@ } } +.watching-focus:not(.focus) { + .msg-user { + opacity: 0.3; + + &.watching-same, + &.msg-highlight { + opacity: 1; + } + } +} + .pref-hideflairicons .features { display: none; } From 560ca055269e925b19ba2158c37070f41c60cbdf Mon Sep 17 00:00:00 2001 From: vyneer Date: Thu, 24 Oct 2024 23:45:26 +0300 Subject: [PATCH 15/16] chore: remove space in messages imports --- assets/chat/css/messages/_index.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/assets/chat/css/messages/_index.scss b/assets/chat/css/messages/_index.scss index ed44312a..a8c3332a 100644 --- a/assets/chat/css/messages/_index.scss +++ b/assets/chat/css/messages/_index.scss @@ -1,7 +1,6 @@ @use '../abstracts' as a; @use 'base'; - @use 'modifiers'; @use 'ui'; @use 'user'; From 8c130854c8691330c85d2135a5768448003186d6 Mon Sep 17 00:00:00 2001 From: vyneer Date: Thu, 24 Oct 2024 23:46:05 +0300 Subject: [PATCH 16/16] fix: font-size onstreamchat rule being broken --- assets/chat/css/style.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/chat/css/style.scss b/assets/chat/css/style.scss index d6b7377a..64d9fe72 100644 --- a/assets/chat/css/style.scss +++ b/assets/chat/css/style.scss @@ -174,8 +174,8 @@ $num-size-map: ( .onstreamchat { @each $num, $size in $num-size-map { - body.pref-fontscale[data-fontscale='#{$size}'] & { - font-size: #{$size}; + body.pref-fontscale[data-fontscale='#{$num}'] & { + font-size: $size; } } }