From 4f89e8ac6e33920d5517771586ca83039900270b Mon Sep 17 00:00:00 2001 From: vyneer Date: Sat, 29 Apr 2023 19:49:22 +0300 Subject: [PATCH] refactor: split up css into separate files --- assets/chat/css/autocomplete.scss | 71 + assets/chat/css/chat.scss | 305 +++ assets/{ => chat/css}/common.scss | 11 + assets/chat/css/focus.scss | 8 + assets/chat/css/menus/ChatEmoteMenu.scss | 45 + assets/chat/css/menus/ChatEmoteTooltip.scss | 32 + assets/chat/css/menus/ChatMenu.scss | 91 + assets/chat/css/menus/ChatSettingsMenu.scss | 123 ++ assets/chat/css/menus/ChatUserInfoMenu.scss | 133 ++ assets/chat/css/menus/ChatUserMenu.scss | 99 + assets/chat/css/menus/ChatWhisperUsers.scss | 86 + assets/chat/css/menus/common.scss | 27 + .../chat/css/messages/ChatEmoteMessage.scss | 176 ++ assets/chat/css/messages/ChatMessage.scss | 87 + .../chat/css/messages/ChatPinnedMessage.scss | 102 + assets/chat/css/messages/ChatUIMessage.scss | 20 + assets/chat/css/messages/ChatUserMessage.scss | 120 ++ assets/chat/css/messages/MessageTypes.scss | 43 + assets/chat/css/onstreamchat.scss | 113 + assets/chat/css/poll.scss | 177 ++ assets/chat/css/scroll.scss | 117 + assets/chat/css/style.scss | 1899 +---------------- assets/chat/css/window.scss | 12 + 23 files changed, 2028 insertions(+), 1869 deletions(-) create mode 100644 assets/chat/css/autocomplete.scss create mode 100644 assets/chat/css/chat.scss rename assets/{ => chat/css}/common.scss (82%) create mode 100644 assets/chat/css/focus.scss create mode 100644 assets/chat/css/menus/ChatEmoteMenu.scss create mode 100644 assets/chat/css/menus/ChatEmoteTooltip.scss create mode 100644 assets/chat/css/menus/ChatMenu.scss create mode 100644 assets/chat/css/menus/ChatSettingsMenu.scss create mode 100644 assets/chat/css/menus/ChatUserInfoMenu.scss create mode 100644 assets/chat/css/menus/ChatUserMenu.scss create mode 100644 assets/chat/css/menus/ChatWhisperUsers.scss create mode 100644 assets/chat/css/menus/common.scss create mode 100644 assets/chat/css/messages/ChatEmoteMessage.scss create mode 100644 assets/chat/css/messages/ChatMessage.scss create mode 100644 assets/chat/css/messages/ChatPinnedMessage.scss create mode 100644 assets/chat/css/messages/ChatUIMessage.scss create mode 100644 assets/chat/css/messages/ChatUserMessage.scss create mode 100644 assets/chat/css/messages/MessageTypes.scss create mode 100644 assets/chat/css/onstreamchat.scss create mode 100644 assets/chat/css/poll.scss create mode 100644 assets/chat/css/scroll.scss create mode 100644 assets/chat/css/window.scss diff --git a/assets/chat/css/autocomplete.scss b/assets/chat/css/autocomplete.scss new file mode 100644 index 00000000..ac5832e9 --- /dev/null +++ b/assets/chat/css/autocomplete.scss @@ -0,0 +1,71 @@ +#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; + } + } +} diff --git a/assets/chat/css/chat.scss b/assets/chat/css/chat.scss new file mode 100644 index 00000000..594adfdd --- /dev/null +++ b/assets/chat/css/chat.scss @@ -0,0 +1,305 @@ +#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-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; + + &: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; + + @at-root #chat-emoticon-btn .btn-icon { + background: transparent url('../img/icon-emotes.svg') no-repeat center + center; + background-size: contain; + } + + @at-root #chat-whisper-btn .btn-icon { + background: transparent url('../img/icon-whispers.svg') no-repeat center + center; + background-size: contain; + } + + @at-root #chat-settings-btn .btn-icon { + background: transparent url('../img/icon-settings.svg') no-repeat center + center; + background-size: contain; + } + + @at-root #chat-users-btn .btn-icon { + background: transparent url('../img/icon-users.svg') no-repeat center + center; + background-size: contain; + } + } + + &.ping .btn-icon { + animation: whisper-pulse 1.5s ease-in-out; + } + + &:hover, + &.active { + .btn-icon { + opacity: 1; + } + } + } +} + +#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; + + &::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; + } + } +} + +/* 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; + + &:hover, + &.unread { + color: $color-chat-text1; + } + + &.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; + } + } + } + + .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; + } + } + + .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%; + } + } +} + +/* 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; + + 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; + } +} + +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; +} diff --git a/assets/common.scss b/assets/chat/css/common.scss similarity index 82% rename from assets/common.scss rename to assets/chat/css/common.scss index 2122417a..1b5c4be6 100644 --- a/assets/common.scss +++ b/assets/chat/css/common.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/focus.scss b/assets/chat/css/focus.scss new file mode 100644 index 00000000..ba77237b --- /dev/null +++ b/assets/chat/css/focus.scss @@ -0,0 +1,8 @@ +/* Focus or highlight a line */ +.focus .msg-chat { + opacity: 0.3; + + &.msg-pinned { + opacity: 1; + } +} diff --git a/assets/chat/css/menus/ChatEmoteMenu.scss b/assets/chat/css/menus/ChatEmoteMenu.scss new file mode 100644 index 00000000..f6a26d0e --- /dev/null +++ b/assets/chat/css/menus/ChatEmoteMenu.scss @@ -0,0 +1,45 @@ +#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; + } +} diff --git a/assets/chat/css/menus/ChatEmoteTooltip.scss b/assets/chat/css/menus/ChatEmoteTooltip.scss new file mode 100644 index 00000000..3e94d9d9 --- /dev/null +++ b/assets/chat/css/menus/ChatEmoteTooltip.scss @@ -0,0 +1,32 @@ +#chat-emote-tooltip { + height: fit-content; + width: fit-content; + min-width: 75px; + max-width: 250px; + + .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; + } + } + } +} diff --git a/assets/chat/css/menus/ChatMenu.scss b/assets/chat/css/menus/ChatMenu.scss new file mode 100644 index 00000000..a943e353 --- /dev/null +++ b/assets/chat/css/menus/ChatMenu.scss @@ -0,0 +1,91 @@ +/* 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; + } + } +} diff --git a/assets/chat/css/menus/ChatSettingsMenu.scss b/assets/chat/css/menus/ChatSettingsMenu.scss new file mode 100644 index 00000000..7df9a345 --- /dev/null +++ b/assets/chat/css/menus/ChatSettingsMenu.scss @@ -0,0 +1,123 @@ +#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; + } + + 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%; + } +} + +.pref-showtime .time { + display: inline; +} + +.pref-hideflairicons .features { + display: none; +} + +.pref-autocompletehelper #chat-auto-complete.active { + display: block; +} + +/* 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; +} diff --git a/assets/chat/css/menus/ChatUserInfoMenu.scss b/assets/chat/css/menus/ChatUserInfoMenu.scss new file mode 100644 index 00000000..ca2331ef --- /dev/null +++ b/assets/chat/css/menus/ChatUserInfoMenu.scss @@ -0,0 +1,133 @@ +#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; + + .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; + + .btn-icon { + opacity: 0.25; + transition: opacity 150ms; + width: 100%; + height: 100%; + display: inline-block; + + @at-root #mute-user-btn .btn-icon { + background: transparent url('../img/icon-mute.svg') no-repeat center + center; + background-size: contain; + } + + @at-root #ban-user-btn .btn-icon { + background: transparent url('../img/icon-ban.svg') no-repeat center + center; + background-size: contain; + } + + @at-root #logs-user-btn .btn-icon { + background: transparent url('../img/icon-logs.svg') no-repeat center + center; + background-size: contain; + } + + @at-root #whisper-user-btn .btn-icon { + background: transparent url('../img/icon-whispers.svg') no-repeat center + center; + background-size: contain; + } + + @at-root #ignore-user-btn .btn-icon { + background: transparent url('../img/icon-ignore.svg') no-repeat center + center; + background-size: contain; + } + + @at-root #unignore-user-btn .btn-icon { + background: transparent url('../img/icon-unignore.svg') no-repeat center + center; + background-size: contain; + } + } + + &:hover, + &.active { + .btn-icon { + opacity: 1; + } + } + } + + #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%; + + &:hover { + opacity: 1; + } + } + + .hidden { + display: none !important; + } +} diff --git a/assets/chat/css/menus/ChatUserMenu.scss b/assets/chat/css/menus/ChatUserMenu.scss new file mode 100644 index 00000000..22e43844 --- /dev/null +++ b/assets/chat/css/menus/ChatUserMenu.scss @@ -0,0 +1,99 @@ +#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 { + background: #282828; + + .mention-nick, + .whisper-nick { + visibility: visible; + } + } + } + } + + .content { + margin-top: -$gutter-md; + padding-bottom: $gutter-lg; + } + + .scrollable { + max-height: calc(100% - 3em); + } + + &.search-in { + .user-entry { + display: none; + + &.found { + display: flex; + } + } + } + + input { + padding: $gutter-lg $gutter-lg; + border: none; + background: none; + border-radius: 0; + } +} diff --git a/assets/chat/css/menus/ChatWhisperUsers.scss b/assets/chat/css/menus/ChatWhisperUsers.scss new file mode 100644 index 00000000..ae021ed6 --- /dev/null +++ b/assets/chat/css/menus/ChatWhisperUsers.scss @@ -0,0 +1,86 @@ +#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; + + &: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; + + &:hover { + opacity: 1; + } + } + } + + .unread-0 { + .badge { + display: none; + } + + .user, + .user:hover { + color: $text-color1; + } + } + + .empty { + color: $text-color1; + margin: $gutter-lg; + } +} + +#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; +} diff --git a/assets/chat/css/menus/common.scss b/assets/chat/css/menus/common.scss new file mode 100644 index 00000000..80811be3 --- /dev/null +++ b/assets/chat/css/menus/common.scss @@ -0,0 +1,27 @@ +.form-control { + color: $color-chat-text2; + background: $color-surface-dark1; + border: 1px solid lighten($color-surface-dark1, 9); + + &:focus { + color: $color-chat-text1; + background: $color-surface-dark1; + border: 1px solid lighten($color-surface-dark1, 15); + box-shadow: none; + outline: none; + } + + &[disabled], + &[readonly], + &::placeholder { + color: $color-chat-place; + } + + &[type='text'] { + width: 100%; + } +} + +textarea.form-control { + width: 100%; +} diff --git a/assets/chat/css/messages/ChatEmoteMessage.scss b/assets/chat/css/messages/ChatEmoteMessage.scss new file mode 100644 index 00000000..c171de5a --- /dev/null +++ b/assets/chat/css/messages/ChatEmoteMessage.scss @@ -0,0 +1,176 @@ +/* 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 { + z-index: 1; + 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; + } + } +} diff --git a/assets/chat/css/messages/ChatMessage.scss b/assets/chat/css/messages/ChatMessage.scss new file mode 100644 index 00000000..be0ee020 --- /dev/null +++ b/assets/chat/css/messages/ChatMessage.scss @@ -0,0 +1,87 @@ +/* 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; + z-index: 120; + + &: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; + color: $color-link; + position: relative; + z-index: 120; + + &:visited { + color: $color-link-visited; + } + + &:hover, + &: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; + } + + .hidden { + display: none !important; + } +} + +/* Continue */ +.msg-continue { + .text:before { + color: $color-chat-disabled; + content: '> '; + } + + &, + .features, + .user { + display: none; + } +} diff --git a/assets/chat/css/messages/ChatPinnedMessage.scss b/assets/chat/css/messages/ChatPinnedMessage.scss new file mode 100644 index 00000000..4ee5fc8d --- /dev/null +++ b/assets/chat/css/messages/ChatPinnedMessage.scss @@ -0,0 +1,102 @@ +/* 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; + + @at-root #close-pin-btn .btn-icon { + background: transparent url('../img/icon-close.svg') no-repeat center + center; + background-size: contain; + } + + @at-root #unpin-btn .btn-icon { + background: transparent url('../img/icon-unpin.svg') no-repeat center + center; + background-size: contain; + } + } + + &:hover, + &.active { + .btn-icon { + opacity: 1; + } + } + } + + &.hidden { + display: none; + } +} diff --git a/assets/chat/css/messages/ChatUIMessage.scss b/assets/chat/css/messages/ChatUIMessage.scss new file mode 100644 index 00000000..1f897a69 --- /dev/null +++ b/assets/chat/css/messages/ChatUIMessage.scss @@ -0,0 +1,20 @@ +.censored { + .text { + display: none; + } + + .ctrl { + display: inline-block; + + &:after { + color: $color-accent; + cursor: pointer; + padding-left: $gutter-md; + content: ''; + } + + &:hover:after { + color: $color-accent-light; + } + } +} diff --git a/assets/chat/css/messages/ChatUserMessage.scss b/assets/chat/css/messages/ChatUserMessage.scss new file mode 100644 index 00000000..eca9bff9 --- /dev/null +++ b/assets/chat/css/messages/ChatUserMessage.scss @@ -0,0 +1,120 @@ +/* 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; + } +} + +/* Own messages */ +.msg-own { + background-color: $color-chat-emphasize; + color: $color-chat-text1; +} + +/* /me messages */ +.msg-me .text { + font-style: italic; +} + +/* Historical messages */ +.msg-historical { + color: $text-color1; + + &:before { + background: none !important; + } + + .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; + } +} + +/* Highlighted messages */ +.msg-highlight { + color: $color-chat-text1; + background-color: $color-chat-highlight; + + time, + .continue { + color: $color-chat-text3; + } + + .pref-taggedvisibility & { + background-color: $color-chat-highlight; + } +} + +/* Tagged messages */ +.msg-tagged { + position: relative; + + &:before { + position: absolute; + top: 0; + left: 0; + bottom: 0; + min-width: 0.45em; + display: block; + background: $color-black; + content: ''; + } + + .pref-taggedvisibility & { + background-color: $color-chat-tagged; + } +} + +$tag-colors: ( + 'green': $color-green, + 'yellow': $color-yellow, + 'orange': $color-orange, + 'red': $color-red, + 'purple': $color-purple, + 'blue': $color-blue, + 'sky': $color-sky, + 'lime': $color-lime, + 'pink': $color-pink, + 'black': $color-black, +); + +@each $name, $value in $tag-colors { + .msg-tagged-#{$name}:before { + background-color: $value; + } +} + +/* Whispers */ +.msg-whisper { + background-color: $color-chat-emphasize; + + a.user { + background: $color-accent; + padding: $gutter-xs $gutter-md $gutter-xs $gutter-md; + border-radius: $bradius; + font-weight: normal; + color: white; + + &:hover { + text-decoration: none; + color: $color-accent; + background: white; + } + } +} diff --git a/assets/chat/css/messages/MessageTypes.scss b/assets/chat/css/messages/MessageTypes.scss new file mode 100644 index 00000000..b94e23d5 --- /dev/null +++ b/assets/chat/css/messages/MessageTypes.scss @@ -0,0 +1,43 @@ +/* Basic UI ChatMessage styles (Status, Error, Info, Command) */ +$basic-ui-styles: 'status', 'error', 'info', 'command'; + +@each $style in $basic-ui-styles { + .msg-#{$style} { + white-space: pre-wrap; + + @if $style != 'info' { + color: $color-chat-text1; + } + + .text:before { + content: ''; + display: inline-block; + vertical-align: text-top; + margin-right: $gutter-sm; + + @extend .icon-#{$style}; + } + + &.msg-continue .text:before { + content: ''; + } + } +} + +/* Broadcasts */ +.msg-broadcast { + background-color: $color-chat-emphasize; + color: $color-text-broadcast !important; + font-size: 1.1em; + font-weight: 400; + padding-top: $gutter-md; + padding-bottom: $gutter-md; + + time { + margin-right: $gutter-md; + } + + &.msg-continue .text:before { + content: ''; + } +} diff --git a/assets/chat/css/onstreamchat.scss b/assets/chat/css/onstreamchat.scss new file mode 100644 index 00000000..1aa4e1d4 --- /dev/null +++ b/assets/chat/css/onstreamchat.scss @@ -0,0 +1,113 @@ +$on-stream-chat-font-size: ( + '2': 15px, + '3': 16px, + '4': 18px, + '5': 20px, + '6': 22px, + '7': 24px, + '8': 26px, + '9': 32px, + '10': 52px, +); + +@keyframes msg-slide-in { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +.onstreamchat { + .chat-lines { + font-size: 1.5em; + } + + #chat, + .msg-chat, + .msg-chat: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; + } + + 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; + } + + @each $scale, $size in $on-stream-chat-font-size { + body.pref-fontscale[data-fontscale='$scale'] & { + font-size: $size; + } + } +} diff --git a/assets/chat/css/poll.scss b/assets/chat/css/poll.scss new file mode 100644 index 00000000..b4d11c08 --- /dev/null +++ b/assets/chat/css/poll.scss @@ -0,0 +1,177 @@ +#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; +} diff --git a/assets/chat/css/scroll.scss b/assets/chat/css/scroll.scss new file mode 100644 index 00000000..70df44d6 --- /dev/null +++ b/assets/chat/css/scroll.scss @@ -0,0 +1,117 @@ +.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); + + &:hover { + color: $color-chat-text1; + } + + .chat-unpinned & { + transition-timing-function: cubic-bezier(0, 0.99, 0.18, 0.99); + opacity: 1; + bottom: 0; + } +} + +/* 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; +} diff --git a/assets/chat/css/style.scss b/assets/chat/css/style.scss index 1e06652e..da2debef 100644 --- a/assets/chat/css/style.scss +++ b/assets/chat/css/style.scss @@ -1,8 +1,37 @@ -@import '../../common'; +@import './common'; @import '../../icons/icons'; @import '~normalize.css'; @import url('https://fonts.googleapis.com/css?family=Roboto:400,500,600,700'); +@import './autocomplete'; +@import './chat'; +@import './focus'; +@import './onstreamchat'; +@import './poll'; +@import './scroll'; +@import './window'; + +@import './menus/ChatEmoteMenu'; +@import './menus/ChatEmoteTooltip'; +@import './menus/ChatMenu'; +@import './menus/ChatSettingsMenu'; +@import './menus/ChatUserInfoMenu'; +@import './menus/ChatUserMenu'; +@import './menus/ChatWhisperUsers'; +@import './menus/common'; + +@import './messages/ChatEmoteMessage'; +@import './messages/ChatMessage'; +@import './messages/ChatPinnedMessage'; +@import './messages/ChatUIMessage'; +@import './messages/ChatUserMessage'; +@import './messages/MessageTypes'; + +@font-face { + font-family: 'Among Us'; + src: url('../../../fonts/AmongUs-Regular.ttf') format('truetype'); +} + *, *::before, *::after { @@ -12,17 +41,6 @@ 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; @@ -51,64 +69,6 @@ body { 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; @@ -124,1802 +84,3 @@ hr { 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-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; - backface-visibility: hidden; - perspective: 1000px; - 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; - z-index: 120; - } - .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; - z-index: 120; - } - .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; - } - .hidden { - display: none !important; - } -} - -/* 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; - } -} - -/* Broadcasts */ -.msg-broadcast { - background-color: $color-chat-emphasize; - color: $color-text-broadcast !important; - font-size: 1.1em; - font-weight: 400; - padding-top: $gutter-md; - padding-bottom: $gutter-md; - time { - margin-right: $gutter-md; - } -} - -/* 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; - } -} - -/* 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 { - z-index: 1; - 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; - } -} - -#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; - .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; - } - } - } -} - -#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; - 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; -} - -/* 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: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; - } - - 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'); -} diff --git a/assets/chat/css/window.scss b/assets/chat/css/window.scss new file mode 100644 index 00000000..3b1e11de --- /dev/null +++ b/assets/chat/css/window.scss @@ -0,0 +1,12 @@ +.chat-output { + width: 100%; + height: 100%; +} + +.chat-lines { + font-family: $chat-lines-font; + line-height: 1.65em; + backface-visibility: hidden; + perspective: 1000px; + outline: 0 !important; +}