From 0984697b5f29c0b4f7a4822dd7603e58c4f934d8 Mon Sep 17 00:00:00 2001 From: Saltssaumure Date: Mon, 7 Nov 2022 02:36:55 +0000 Subject: [PATCH] Additions: https://discord.com/channels/946226981501042709/1024836554360901632/1038939619720446065 --- scss/_popovers.scss | 573 +++++++++++++++++++++++++++ scss/_vars.scss | 31 ++ scss/{ => mixins}/_boxes.scss | 9 + scss/{ => mixins}/_buttons.scss | 10 + scss/{ => mixins}/_shortcutIcon.scss | 0 scss/xp.scss | 527 +++++------------------- 6 files changed, 729 insertions(+), 421 deletions(-) create mode 100644 scss/_popovers.scss create mode 100644 scss/_vars.scss rename scss/{ => mixins}/_boxes.scss (94%) rename scss/{ => mixins}/_buttons.scss (78%) rename scss/{ => mixins}/_shortcutIcon.scss (100%) diff --git a/scss/_popovers.scss b/scss/_popovers.scss new file mode 100644 index 0000000..3221a4f --- /dev/null +++ b/scss/_popovers.scss @@ -0,0 +1,573 @@ +@use "_vars.scss" as *; + +// Popouts +.layerContainer-2v_Sit { + + // Inbox etc window + .messagesPopoutWrap-3zryHW { + border-radius: 8px 8px 0 0; + max-height: calc(100vh - $window-top - 120px)!important; + // No "protips" please + .footer-5ji8u1 { + display: none; + } + } + + // Tooltips + .tooltip-14MtrL { + background: $beige; + border: 1px solid black; + color: black; + border-radius: 0; + .guildNameText-jBFbNC { + color: black; + } + .tooltipPointer-3L49xb { + border-top-color: black; + } + } + + // Small menus + .menu-1QACrS { + --interactive-normal: black; + background: $beige; + border: 1px solid black; + border-radius: 0; + + // Menu item + .colorDefault-CDqZdO { + + // Focused menu item + &.focused-3qFvc8 { + background: $blue-select; + border-radius: 0; + } + + .icon-E4cW1l { + // Radio button + path[d^="M12 20C16.4183"] { + d: path("M 12 22 A 1 1 0 0 0 12 2 A 1 1 0 0 0 12 22 Z M 12 21 A 1 1 0 0 0 12 3 A 1 1 0 0 0 12 21 Z"); + } + // circle + .radioSelection-1UHp0b { + color: $green-bright; + } + + // Checkbox + .checkbox-hADx5o { + d: path("M 2 2 V 22 H 22 V 2 Z M 3 3 V 21 H 21 V 3 Z"); + color: black; + border: 1px solid black; + } + .check-3HZJs4 { + color: $green-bright; + } + } + + } + // Slider bar + .bar-1Bhnl9 { + background: $beige; + box-shadow: ( + inset 1px 1px 2px 0 grey, + inset -2px -2px 2px 0 white + ); + .barFill-2Bh7CX { + background: transparent; + } + } + // Handle + .grabber-2GQyvM { + height: 16px; + width: 10px; + margin-top: -1px; + border-radius: 3px; + border: solid $green-bright; + border-width: 3px 0; + box-shadow: ( + inset -1px -1px 2px 0 grey, + inset 2px 2px 2px 0 white + ); + } + } + + // Profile + .accountProfilePopoutWrapper-3GskID { + @include windowHasPseudoTitle("User Profile"); + &::before { + left: -2px; + } + .userProfileOuter-1K_BYU { + border-radius: 0; + } + } + + // Inbox + .recentMentionsPopout-2bI1ZN { + + // Top bar + .header-145e10 { + @include windowTitle; + --interactive-normal: black; + --interactive-active: black; + + // Mentions / unreads tabs + .topPill-3DJJNV { + position: absolute; + bottom: -1px; + z-index: 1; + align-items: base; + .tab-TRrPC8 { + background: $beige; + border-radius: 3px 3px 0 0; + border: solid $blue-select; + border-width: 1px 1px 0 1px; + margin: 0; + // Selected tab + &.selected-g-kMVV { + padding-top: 1px; + height: 25px; + background: linear-gradient(to bottom, orange, white 10%, $beige 80%); + } + // Hovered tab + &:hover { + color: black; + } + } + } + } + // Mark all as read button + &.container-2ebMPP { + .header-145e10 .button-1_oXub { + @include winButton(26px, false); + } + } + // Filter mentions button + &.messagesPopoutWrap-3zryHW { + .header-145e10 .button-1_oXub { + @include winButton(26px, false); + } + } + + // Content + .messagesPopout-eVzQcI, + .scroller-145h9c { + @include startMenuList; + --header-primary: black; + --header-secondary: grey; + background: $beige; + + // Channel unread group + .channel-3NJZ1V, + .container-iA3Qrz { + // Channel group header + .channelHeader-DFRX8q { + background: $beige; + // Buttons + .button-1_oXub { + @include beigeButton(); + } + } + // Message group + .messages-23can0, + .messageContainer-3VTXBC { + @include indentBox; + } + } + } + } + + // Threads + .browser-mnQ1T7 { + border-radius: 8px 8px 0 0; + + // Top bar + .header-3_zmOb { + @include windowTitle; + + // # + .threadIcon-rd1kqG { + color:white; + } + + // Search bar + .searchBox-3IjAC1 { + @include beigeButton; + box-shadow: ( + inset 1px 1px 2px 0 grey, + inset -2px -2px 2px 0 white + ); + .input-2m5SfJ { + color: black; + } + } + + // Close button + .closeIcon-11tHJX { + @include winButton(26px, true); + display: flex; + align-items: center; + justify-content: center; + } + + // Create thread button + .createButton-oruGBs { + @include beigeButton; + } + } + + // Content + .list-3YHPPb { + @include startMenuList; + background: $beige; + // Thread age + .sectionHeader-QsOv68 { + color: black!important; + } + // Thread + .container-2rzKKA { + @include indentBox; + border: 0; + } + // No threads + .container-2c4_8A { + .defaultColor-HXu-5n, + .text-md-normal-304U3g { + color: black!important; + } + } + } + } + + // Pinned messages + .messagesPopoutWrap-3zryHW { + .header-1w9Q93 { + @include windowTitle; + } + .messagesPopout-eVzQcI { + @include startMenuList; + background: $beige; + .messageGroupWrapper-1jf_7C { + @include indentBox; + border: 0; + } + } + } + + // User profile + .userPopoutOuter-3AVBmJ { + border-radius: 0; + @include windowHasPseudoTitle("User info"); + &::before { + width: 100%; + left: 0; + } + .avatarWrapper-3y0KZ1 { + left: 24px; + } + + // All profiles + .userPopoutInner-1hXSeY { + + // Edit profile button + .pencilContainer-11Kuga { + @include beigeButton; + .pencilIcon-1MUmnO { + color: black; + } + } + + // Hypesquad etc badges + .profileBadges-31rDHI { + @include beigeButton; + } + + // Inner box + .overlayBackground-1KgwVi { + border-radius: 0; + --font-primary: Tahoma, sans-serif; + --font-display: Tahoma, sans-serif; + @include indentBox; + + // Roles + .rolePill-2IJ1vo { + @include beigeButton; + } + + // User note + .note-6O4w9y { + @include indentBox; + } + + // Message user + .messageInputContainer-2rGDH8 { + @include indentBox; + } + } + } + + // Unstyled profile + .userProfileInnerThemedNonPremium-1gT-zY { + background: $beige; + + --interactive-active: black; + --header-primary: black; + --header-secondary: grey; + --text-normal: black; + --background-secondary: beige; + --interactive-muted: beige; + + // Inner box + .overlayBackground-1KgwVi { + background: white; + } + } + } + + // VC ping + .container-1ILvLB { + @include beigeBox; + .popoutText-3NRmTw { + color: black; + } + } + + // Stream preview + .streamPreview-I7itZ6 { + @include beigeBox; + .watchButton-2YRKxv { + @include beigeButton; + } + } + + // Search options + .container-2McqkF { + --header-secondary: black; + --text-muted: black; + --interactive-normal: black; + --search-popout-option-non-text-color: black; + --search-popout-option-user-nickname: black; + --search-popout-option-user-username: black; + --search-popout-date-picker-hint-text: black; + --background-floating: #{$beige}; + --background-modifier-hover: #{$blue-select}; + --search-popout-option-fade: linear-gradient(to right, transparent, #{$beige}); + --search-popout-option-fade-hover: linear-gradient(to right, transparent, #{$blue-select} 60%); + border-radius: 0; + border: 1px solid black; + .option-ayUoaq { + border-radius: 0; + } + + .react-datepicker { + background: $beige; + .react-datepicker__navigation { + @include beigeButton; + background-size: 30%; + background-repeat: no-repeat; + background-position: center; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='25'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M17.338 12.485c-4.156 4.156-8.312 8.312-12.468 12.467-1.402-1.402-2.805-2.804-4.207-4.206 2.756-2.757 5.513-5.514 8.27-8.27C6.176 9.72 3.419 6.963.663 4.207L4.87 0c-.058-.059 12.555 12.562 12.468 12.485z' clip-rule='evenodd'/%3E%3C/svg%3E"); + } + .react-datepicker__header { + background: transparent; + .react-datepicker__current-month, + .react-datepicker__day-name { + color: black; + } + } + .react-datepicker__month { + border: 1px solid black; + border-radius: 3px; + .react-datepicker__day:not(.react-datepicker__day--disabled) { + @include beigeButton; + border-radius: 0; + border: 0; + &.react-datepicker__day--outside-month { + background: $beige; + } + } + .react-datepicker__day--disabled { + background: $beige; + color: grey; + } + } + } + .hintValue-V9hd8l { + @include beigeButton; + &:hover { + background: inherit; + } + } + } + + // Emoji pickers + #emoji-picker-tab-panel { + --interactive-normal: black; + --interactive-hover: black; + --interactive-active: black; + --text-normal: black; + --header-secondary: black; + --background-primary: #{$blue-select}; + .header-11eigE { + background: $beige; + border-radius: 0; + .searchBar-2M9mRP { + @include beigeButtonInset; + } + .diversitySelectorButton-2CGlo5, + .diversitySelectorOptions-3DhNYs { + @include beigeButton; + padding: 3px; + } + } + .emojiPicker-6YCk8a { + background: white; + border-radius: 0; + // Emoji grid + .bodyWrapper-1eSOtW { + box-shadow: ( + inset 0 0 2px 2px grey, + ); + // Section title + .wrapper-1NNaWG { + background: linear-gradient(to bottom, transparent, white, transparent); + } + // Hovered emoji + .emojiItem-277VFM.emojiItemSelected-2Lg50V { + @include beigeButton; + box-shadow: ( + inset 1px 1px 2px 0 grey, + inset -2px -2px 2px 0 white + ); + } + } + // Emoji info + .inspector-DFKXwB { + background: $beige; + } + } + .categoryList-2qRrlj { + background: $beige; + } + } + // Reaction emoji picker + .animatorLeft-3yvG13>#emoji-picker-tab-panel { + @include windowHasPseudoTitle("Add a reaction"); + &::before { + left: -2px; + } + } + + // Gif / sticker / emoji picker + .contentWrapper-3vHNP2 { + --interactive-normal: black; + --interactive-hover: black; + --interactive-active: black; + --text-normal: black; + --header-secondary: black; + --background-primary: #{$blue-select}; + --background-tertiary: transparent; + background: $beige; + border-radius: 0; + @include windowHasPseudoTitle("Chat addition"); + &::before { + left: -2px; + } + overflow: visible; + + // Gif / sticker / emoji buttons + .navButton-1XuvI- { + @include beigeButton; + &.navButtonActive-1EqC5l { + @include beigeButtonInset; + } + } + // Gif / sticker searchbar + .container-1SX9VC, + .container-2oNtJn { + @include beigeButtonInset; + } + + // Sticker picker + #sticker-picker-tab-panel { + // Sticker grid + #sticker-picker-grid { + background: white; + box-shadow: ( + inset 0 0 2px 2px grey, + ); + // Section title + .wrapper-1NNaWG { + background: linear-gradient(to bottom, transparent, white, transparent); + } + } + // Discord default sticker button + .standardStickerShortcut-ObSns3 { + background: $beige; + } + // Emoji info + .inspector-DFKXwB { + background: $beige; + } + } + .categoryList-2qRrlj { + background: $beige; + } + + // Gif picker + #gif-picker-tab-panel { + // Back button + .backButton-bSKWLe { + color: black; + } + // Favs category + .categoryFadeBlurple-1l49_Q { + background: $black-overlay; + } + // Item / category + .result-pzZrwj { + background-color: white!important; + &::after { + box-shadow: inset 0 0 0 2px white; + border-radius: 0; + } + } + // Hovered + .focused-16Owih, + .result-pzZrwj:hover { + box-shadow: 0 11px 22px 1px $white-overlay; + } + // Placeholder for loading gif + .placeholder-T1Tuu8 { + border-radius: 0; + background: $white-overlay; + } + } + } + + // Modals + // BSOD + .backdrop-2ByYRN { + background: var(--bsod-color, navy)!important; + opacity: 1.0!important; + &::before { + content: var(--bsod-text, var(--bsod-text-original)); + white-space: pre-wrap; + display: block; + font-family: 'Courier New', Courier, monospace; + font-size: 20px; + color: white; + margin: 40px; + } + } + // Modal item + .layer-1Ixpg3 { + align-items: flex-end; + padding-right: 10vw; + .focusLock-2tveLW { + border: 2px solid white; + padding: 5px; + background: var(--bsod-color, rgba(0, 0, 128, 0.8)); + } + } +} \ No newline at end of file diff --git a/scss/_vars.scss b/scss/_vars.scss new file mode 100644 index 0000000..0fa849e --- /dev/null +++ b/scss/_vars.scss @@ -0,0 +1,31 @@ +// Member list +$panel-width: 240px; + +// Chat window +$window-top: 50px; +$window-right: 120px; +$window-bottom: 50px; +$window-left: 270px; + +// Window bars +$title-height: 30px; + +// General colours +$blue-select: rgb(22, 101, 202); +$blue-max: rgb(0, 90, 231); +$blue-vivid: rgb(3, 114, 255); +$blue-mild: rgb(87, 140, 208); +$blue-bright: rgb(16, 140, 228); + +$red-bright: rgb(230, 77, 28); +$red-max: rgb(199, 50, 7); + +$green-bright: rgb(56, 196, 56); +$green-max: green; + +$test-color: rgb(56, 57, 121); +$beige: rgb(235, 232, 215); +$beige-light: rgb(240, 239, 237); + +$white-overlay: hsla(0,0%,100%,0.8); +$black-overlay: hsla(0,0%,0%,0.7); \ No newline at end of file diff --git a/scss/_boxes.scss b/scss/mixins/_boxes.scss similarity index 94% rename from scss/_boxes.scss rename to scss/mixins/_boxes.scss index 8a7c077..63c0247 100644 --- a/scss/_boxes.scss +++ b/scss/mixins/_boxes.scss @@ -1,3 +1,5 @@ +@use "../_vars.scss" as *; + @mixin windowBox($vertical-offset) { border: 2px solid $blue-select; border-top: 0; @@ -105,4 +107,11 @@ inset 1px 1px 2px 0 $black-overlay, inset -2px -2px 2px 0 white ); +} + +@mixin beigeBox() { + --text-normal: black; + background: $beige; + border: 1px solid black; + border-radius: 0; } \ No newline at end of file diff --git a/scss/_buttons.scss b/scss/mixins/_buttons.scss similarity index 78% rename from scss/_buttons.scss rename to scss/mixins/_buttons.scss index 6919ab3..4abd694 100644 --- a/scss/_buttons.scss +++ b/scss/mixins/_buttons.scss @@ -1,3 +1,5 @@ +@use "../_vars.scss" as *; + @mixin beigeButton() { border-radius: 3px; border: 1px solid black; @@ -9,6 +11,14 @@ ); } +@mixin beigeButtonInset() { + @include beigeButton(); + box-shadow: ( + inset 1px 1px 2px 0 grey, + inset -2px -2px 2px 0 white + ); +} + @mixin winButton($size, $isRed) { top: 0; min-height: $size; diff --git a/scss/_shortcutIcon.scss b/scss/mixins/_shortcutIcon.scss similarity index 100% rename from scss/_shortcutIcon.scss rename to scss/mixins/_shortcutIcon.scss diff --git a/scss/xp.scss b/scss/xp.scss index 049e978..9e906d9 100644 --- a/scss/xp.scss +++ b/scss/xp.scss @@ -5,10 +5,13 @@ * @version 1.1.0 */ -@import "_shortcutIcon.scss"; -@import "_boxes.scss"; -@import "_buttons.scss"; +@use "_vars.scss" as *; + +@import "mixins/_shortcutIcon.scss"; +@import "mixins/_boxes.scss"; +@import "mixins/_buttons.scss"; @import "_bsod.scss"; +@import "_popovers.scss"; @import url("https://discordstyles.github.io/HorizontalServerList/dist/HorizontalServerList.css"); @import url("https://discordstyles.github.io/Addons/bottomhsl.css"); @@ -23,38 +26,6 @@ code, font-family: var(--font-code); } -// Member list -$panel-width: 240px; - -// Chat window -$window-top: 50px; -$window-right: 120px; -$window-bottom: 50px; -$window-left: 270px; - -// Window bars -$title-height: 30px; - -// General colours -$blue-select: rgb(22, 101, 202); -$blue-max: rgb(0, 90, 231); -$blue-vivid: rgb(3, 114, 255); -$blue-mild: rgb(87, 140, 208); -$blue-bright: rgb(16, 140, 228); - -$red-bright: rgb(230, 77, 28); -$red-max: rgb(199, 50, 7); - -$green-bright: rgb(56, 196, 56); -$green-max: green; - -$test-color: rgb(56, 57, 121); -$beige: rgb(235, 232, 215); -$beige-light: rgb(240, 239, 237); - -$white-overlay: hsla(0,0%,100%,0.8); -$black-overlay: hsla(0,0%,0%,0.7); - body #app-mount { // Very top window bar @@ -284,6 +255,10 @@ body #app-mount { } } } + // User in voice channel + .content-1Tgc42 { + border-radius: 0; + } // Selected channel .modeSelected-3DmyhH { // Channel actions @@ -378,14 +353,38 @@ body #app-mount { // Control panel .panels-3wFtMD { width: $panel-width; - height: var(--server-container); + height: auto; position: fixed; - top: calc(100% - var(--server-container)); + bottom: -1px; left: calc(100vw - $panel-width); + z-index: 0; @include barGradient(false, $blue-bright, $blue-mild); + &:hover { + z-index: 1; + } + + .subtext-2HDqJ7 { + color: $white-overlay; + } + // Voice chat controls + .container-1zzFcN { + // Video stream buttons + .button-1EGGcP { + @include beigeButton; + &.buttonActive-Uc1jHx { + background: $beige; + box-shadow: ( + inset 1px 1px 2px 0 grey, + inset -2px -2px 2px 0 white + ); + } + } + } + + // User and settings .container-YkUktl { - height: inherit; + height: var(--server-container); flex-direction: row-reverse; // Self info @@ -400,25 +399,21 @@ body #app-mount { color: white; font-weight: normal; } - .subtext-2HDqJ7 { - color: $white-overlay; - } } } + } - - // Buttons - .button-12Fmur { - color: $white-overlay; - } - .withTagAsButton-OsgQ9L:hover, - .withTagless-10ooWt:hover, - .button-12Fmur.enabled-9OeuTA:hover { - background: linear-gradient(to bottom, $blue-select, $blue-bright); - } - .button-12Fmur.enabled-9OeuTA:hover { - color: white; - } + // Buttons + .button-12Fmur { + color: $white-overlay; + } + .withTagAsButton-OsgQ9L:hover, + .withTagless-10ooWt:hover, + .button-12Fmur.enabled-9OeuTA:hover { + background: linear-gradient(to bottom, $blue-select, $blue-bright); + } + .button-12Fmur.enabled-9OeuTA:hover { + color: white; } } } @@ -443,35 +438,6 @@ body #app-mount { @include mainWindow(); } - // Main chat with thread open - .chat-2ZfjoI.threadSidebarOpen-1LSXvU { - border-radius: 0; - // Message needs no indent as member list cannot be visible at once. - .chatContent-3KubbW .message-2CShn3 { - margin-right: 0 !important; - } - } - // Main chat / thread separator - .resizeHandle-PBRzPC { - position: relative; - right: $window-right; - margin: $window-top 0 $window-bottom 0; - height: auto; - background: $blue-vivid; - } - // Thread panel - .container-3XgAHv { - position: relative; - margin: $window-top 0 $window-bottom 0; - right: $window-right; - border-radius: 0; - max-width: 100%; - @include windowBox(3px); - } - .chatTarget-3H6mpC { - display: none; - } - // Main chat and top bar .chat-2ZfjoI { @include mainWindow(); @@ -502,6 +468,10 @@ body #app-mount { } } } + // Autocompleter + .autocomplete-3NRXG8 { + width: calc(100% - 150px); + } } } @@ -538,366 +508,81 @@ body #app-mount { border-radius: 0; } } - - } - } - } - } - } - - // Settings menu - .layer-86YKbF { - background: transparent; - .standardSidebarView-E9Pc3j { - @include mainWindow(); - } - } - - // Popouts - .layerContainer-2v_Sit { - - // Inbox etc window - .messagesPopoutWrap-3zryHW { - border-radius: 8px 8px 0 0; - max-height: calc(100vh - $window-top - 120px)!important; - // No "protips" please - .footer-5ji8u1 { - display: none; - } - } - - // Tooltips - .tooltip-14MtrL { - background: $beige; - border: 1px solid black; - color: black; - border-radius: 0; - .guildNameText-jBFbNC { - color: black; - } - .tooltipPointer-3L49xb { - border-top-color: black; - } - } - - // Small menus - .menu-1QACrS { - --interactive-normal: black; - background: $beige; - border: 1px solid black; - border-radius: 0; - - // Menu item - .colorDefault-CDqZdO { - - // Focused menu item - &.focused-3qFvc8 { - background: $blue-select; - border-radius: 0; - } - - .icon-E4cW1l { - // Radio button - path[d^="M12 20C16.4183"] { - d: path("M 12 22 A 1 1 0 0 0 12 2 A 1 1 0 0 0 12 22 Z M 12 21 A 1 1 0 0 0 12 3 A 1 1 0 0 0 12 21 Z"); - } - // circle - .radioSelection-1UHp0b { - color: $green-bright; - } - - // Checkbox - .checkbox-hADx5o { - d: path("M 2 2 V 22 H 22 V 2 Z M 3 3 V 21 H 21 V 3 Z"); - color: black; - border: 1px solid black; - } - .check-3HZJs4 { - color: $green-bright; } } - } - // Slider bar - .bar-1Bhnl9 { - background: $beige; - box-shadow: ( - inset 1px 1px 2px 0 grey, - inset -2px -2px 2px 0 white - ); - .barFill-2Bh7CX { - background: transparent; + // VC video + .video-3n15R6 { + z-index: 0; } } - // Handle - .grabber-2GQyvM { - height: 16px; - width: 10px; - margin-top: -1px; - border-radius: 3px; - border: solid $green-bright; - border-width: 3px 0; - box-shadow: ( - inset -1px -1px 2px 0 grey, - inset 2px 2px 2px 0 white - ); - } - } - - // Profile - .accountProfilePopoutWrapper-3GskID { - @include windowHasPseudoTitle("User Profile"); - &::before { - left: -2px; - } - .userProfileOuter-1K_BYU { + // Main chat with thread open + .chat-2ZfjoI.threadSidebarOpen-1LSXvU { border-radius: 0; - } - } - - // Inbox - .recentMentionsPopout-2bI1ZN { - - // Top bar - .header-145e10 { - @include windowTitle; - --interactive-normal: black; - --interactive-active: black; - - // Mentions / unreads tabs - .topPill-3DJJNV { - position: absolute; - bottom: -1px; - z-index: 1; - align-items: base; - .tab-TRrPC8 { - background: $beige; - border-radius: 3px 3px 0 0; - border: solid $blue-select; - border-width: 1px 1px 0 1px; - margin: 0; - // Selected tab - &.selected-g-kMVV { - padding-top: 1px; - height: 25px; - background: linear-gradient(to bottom, orange, white 10%, $beige 80%); - } - // Hovered tab - &:hover { - color: black; - } - } + // Message needs no indent as member list cannot be visible at once. + .chatContent-3KubbW .message-2CShn3 { + margin-right: 0 !important; } - } - // Mark all as read button - &.container-2ebMPP { - .header-145e10 .button-1_oXub { - @include winButton(26px, false); + // Neither does autocompleter + .autocomplete-3NRXG8 { + width: auto!important; } } - // Filter mentions button - &.messagesPopoutWrap-3zryHW { - .header-145e10 .button-1_oXub { - @include winButton(26px, false); - } + .resizeHandle-PBRzPC { + background: $blue-vivid; } - - // Content - .messagesPopout-eVzQcI, - .scroller-145h9c { - @include startMenuList; - --header-primary: black; - --header-secondary: grey; - background: $beige; - - // Channel unread group - .channel-3NJZ1V, - .container-iA3Qrz { - // Channel group header - .channelHeader-DFRX8q { - background: $beige; - // Buttons - .button-1_oXub { - @include beigeButton(); - } - } - // Message group - .messages-23can0, - .messageContainer-3VTXBC { - @include indentBox; - } - } + // Floating thread panel + .floating-3M3WeH { + border-radius: 0; } - } - - // Threads - .browser-mnQ1T7 { - border-radius: 8px 8px 0 0; - - // Top bar - .header-3_zmOb { - @include windowTitle; - - // # - .threadIcon-rd1kqG { - color:white; - } - - // Search bar - .searchBox-3IjAC1 { - @include beigeButton; - box-shadow: ( - inset 1px 1px 2px 0 grey, - inset -2px -2px 2px 0 white - ); - .input-2m5SfJ { - color: black; - } + // Threads not video chat + .content-1SgpWY> { + // Main chat / thread separator + .resizeHandle-PBRzPC { + position: relative; + right: $window-right; + margin: $window-top 0 $window-bottom 0; + height: auto; } - - // Close button - .closeIcon-11tHJX { - @include winButton(26px, true); - display: flex; - align-items: center; - justify-content: center; + // Thread panel + .container-3XgAHv { + position: relative; + margin: $window-top 0 $window-bottom 0; + right: $window-right; + border-radius: 0; + max-width: 100%; + @include windowBox(3px); } - - // Create thread button - .createButton-oruGBs { - @include beigeButton; + // Floating thread panel for narrow screens + .chatLayerWrapper-2mgEK- { + // margin: $window-top $window-right $window-bottom 0; + top: $window-top; + right: calc($window-right + 2px); + bottom: calc($window-bottom + 2px); + height: auto; } } - - // Content - .list-3YHPPb { - @include startMenuList; - background: $beige; - // Thread age - .sectionHeader-QsOv68 { - color: black!important; - } - // Thread - .container-2rzKKA { - @include indentBox; - border: 0; - } - // No threads - .container-2c4_8A { - .defaultColor-HXu-5n, - .text-md-normal-304U3g { - color: black!important; - } - } + .chatTarget-3H6mpC { + display: none; } } + } - // Pinned messages - .messagesPopoutWrap-3zryHW { - .header-1w9Q93 { - @include windowTitle; - } - .messagesPopout-eVzQcI { - @include startMenuList; - background: $beige; - .messageGroupWrapper-1jf_7C { - @include indentBox; - border: 0; - } - } + .layer-86YKbF { + background: transparent; + // Settings menu + .standardSidebarView-E9Pc3j { + @include mainWindow(); } - - // User profile - .userPopoutOuter-3AVBmJ { + .pictureInPictureWindow-3ms5Zy { + @include windowHasPseudoTitle("Stream"); + overflow: visible; border-radius: 0; - @include windowHasPseudoTitle("User info"); - &::before { - width: 100%; - left: 0; - } - .avatarWrapper-3y0KZ1 { - left: 24px; - } - - // All profiles - .userPopoutInner-1hXSeY { - - // Edit profile button - .pencilContainer-11Kuga { - @include beigeButton; - .pencilIcon-1MUmnO { - color: black; - } - } - - // Hypesquad etc badges - .profileBadges-31rDHI { - @include beigeButton; - } - - // Inner box - .overlayBackground-1KgwVi { - border-radius: 0; - --font-primary: Tahoma, sans-serif; - --font-display: Tahoma, sans-serif; - @include indentBox; - - // Roles - .rolePill-2IJ1vo { - @include beigeButton; - } - - // User note - .note-6O4w9y { - @include indentBox; - } - - // Message user - .messageInputContainer-2rGDH8 { - @include indentBox; - } - } - } - - // Unstyled profile - .userProfileInnerThemedNonPremium-1gT-zY { - background: $beige; - - --interactive-active: black; - --header-primary: black; - --header-secondary: grey; - --text-normal: black; - --background-secondary: beige; - --interactive-muted: beige; - - // Inner box - .overlayBackground-1KgwVi { - background: white; - } - } - } - - // Modals - .backdrop-2ByYRN { - background: var(--bsod-color, navy)!important; - opacity: 1.0!important; &::before { - content: var(--bsod-text, var(--bsod-text-original)); - white-space: pre-wrap; - display: block; - font-family: 'Courier New', Courier, monospace; - font-size: 20px; - color: white; - margin: 40px; + left: -2px; } - } - .layer-1Ixpg3 { - align-items: flex-end; - padding-right: 10vw; - .focusLock-2tveLW { - border: 2px solid white; - padding: 5px; - background: var(--bsod-color, rgba(0, 0, 128, 0.8)); + .pictureInPictureVideo-2puO2Q { + border-radius: 0; } } }