├── CHANGELOG.md ├── LICENSE ├── README.md ├── assets ├── banner.png └── icon.png ├── index.css ├── index.scss ├── manifest.json ├── powercord_manifest.json ├── screenshots ├── issue1.png └── preview.png └── src ├── _base.scss ├── _keyframes.scss ├── _root.scss ├── main ├── _avatar.scss └── _status-picker.scss └── support ├── StatusPickerPlus.theme.css ├── StatusPickerPlus.user.css └── compiled.css /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # v1.0.4 2 | Some general changes. 3 | - Fix for the user icon getting rendered behind the popout. This closes [issue #1](https://github.com/Discord-Theme-Addons/statuspicker-plus/issues/1). This fix is *very* scuffed so if anyone has a better way, please make a pull request! 4 | - Switched the BD and Stylus version to an `@import` of the source instead. 5 | - Updated README assets & fixed BD link. 6 | 7 | # v1.0.3 8 | Some general enhancements that should make this a bit better. 9 | - Some changes to prevent this thing from completely breaking if a plugin / Discord themselves adds a new staus to the menu. It'll still break, but not completely. 10 | - Removed the transition for hovering on the custom status box. 11 | - Removed some unnecessary uses of !important. 12 | - There are two new variables that you can use to set the box-shadow color and for when you hover on the custom status box. 13 | ```css 14 | :root { 15 | --box-shadow-color: rgb(0, 0, 0, 0.5); 16 | --custom-status-hover: #5C6FB1; 17 | } 18 | ``` 19 | 20 | # v1.0.2 21 | Multiple fixes that this thing really needed. 22 | - If you're using the Game Activity Toggle plugin and have it where it displays on the status list, it should no longer break the entire thing. I couldn't really find out a proper way to fix this- this entire thing is scuffed to begin with so I just put it in the top left part of the menu. 23 | - Fixed the position issue for the placeholder avatar. You can also customize that now if you'd like! 24 | 25 | # v1.0.1 26 | Made the custom status placeholder text reappear; kinda looked strange when blank. 27 | 28 | # v1.0.0 29 | Initial creation, welcome! -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 LuckFire 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![Banner](./assets/banner.png) 2 | 3 | # Status Picker+ 4 | Makes Discord's status picker look spicier. Credit to [Tropical](https://github.com/Tropix126) for the original code, I made a revamped version of it off of his original creation. 5 | 6 | ![Preview](./screenshots/preview.png) 7 | 8 | # Installation 9 | For **[Powercord](http://powercord.dev/)** or **[Vizality](https://vizality.com/)** installation, go to **Themes -> Open a CMD / Powershell / Terminal / Gitbash** in the folder, and enter the following: 10 | ``` 11 | git clone https://github.com/Discord-Theme-Addons/statuspicker-plus 12 | ``` 13 | 14 | **For [BetterDiscord](https://betterdiscord.net/):** 15 | - [Direct Dowload](https://github.com/Discord-Theme-Addons/statuspicker-plus/releases/download/v1.0.4/StatusPickerPlus.theme.css) 16 | - [View Source](https://raw.githack.com/Discord-Theme-Addons/statuspicker-plus/master/src/support/StatusPickerPlus.theme.css) 17 | 18 | **For Browser / Web:** 19 | 1. Install the Stylus extension for [Chrome](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne) / [Firefox](https://addons.mozilla.org/en-US/firefox/addon/styl-us/) / [Opera](https://github.com/openstyles/stylus/wiki/Opera,-Outdated-Stylus). 20 | 2. After installing, head over to [this link](https://raw.githack.com/Discord-Theme-Addons/statuspicker-plus/master/src/support/StatusPickerPlus.user.css). 21 | 3. Press the "Install Style" button. 22 | -------------------------------------------------------------------------------- /assets/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/discord-extensions-archived/statuspicker-plus/5b945206d005402c693f1d38aec3a20cab898b2b/assets/banner.png -------------------------------------------------------------------------------- /assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/discord-extensions-archived/statuspicker-plus/5b945206d005402c693f1d38aec3a20cab898b2b/assets/icon.png -------------------------------------------------------------------------------- /index.css: -------------------------------------------------------------------------------- 1 | @-webkit-keyframes StatusPicker { 2 | 0% { 3 | -webkit-transform: translateY(5px); 4 | transform: translateY(5px); 5 | opacity: 0; 6 | } 7 | 100% { 8 | -webkit-transform: none; 9 | transform: none; 10 | opacity: 1; 11 | } 12 | } 13 | 14 | @keyframes StatusPicker { 15 | 0% { 16 | -webkit-transform: translateY(5px); 17 | transform: translateY(5px); 18 | opacity: 0; 19 | } 20 | 100% { 21 | -webkit-transform: none; 22 | transform: none; 23 | opacity: 1; 24 | } 25 | } 26 | @-webkit-keyframes StatusPickerAvatar { 27 | 0% { 28 | -webkit-transform: translateY(5px) translateX(-50%); 29 | transform: translateY(5px) translateX(-50%); 30 | opacity: 0; 31 | } 32 | 100% { 33 | -webkit-transform: translateX(-50%); 34 | transform: translateX(-50%); 35 | opacity: 1; 36 | } 37 | } 38 | @keyframes StatusPickerAvatar { 39 | 0% { 40 | -webkit-transform: translateY(5px) translateX(-50%); 41 | transform: translateY(5px) translateX(-50%); 42 | opacity: 0; 43 | } 44 | 100% { 45 | -webkit-transform: translateX(-50%); 46 | transform: translateX(-50%); 47 | opacity: 1; 48 | } 49 | } 50 | #app-mount .scale-3iLZhb { 51 | opacity: 1; 52 | -webkit-transform: none; 53 | transform: none; 54 | } 55 | #app-mount #status-picker { 56 | z-index: 0; 57 | background: radial-gradient(circle at center 45px, transparent 34px, var(--menu-bg) 0); 58 | border-radius: var(--border-radius); 59 | -webkit-box-shadow: 0 0 8px var(--box-shadow-color); 60 | box-shadow: 0 0 8px var(--box-shadow-color); 61 | margin-bottom: 19px; 62 | width: 224px; 63 | height: 172px; 64 | -webkit-animation: StatusPicker 350ms ease forwards; 65 | animation: StatusPicker 350ms ease forwards; 66 | } 67 | #app-mount #status-picker .scroller-3BxosC { 68 | display: -webkit-box; 69 | display: -ms-flexbox; 70 | display: flex; 71 | -webkit-box-align: start; 72 | -ms-flex-align: start; 73 | align-items: flex-start; 74 | margin-top: 40%; 75 | width: 94%; 76 | left: 25px; 77 | } 78 | #app-mount #status-picker .scroller-3BxosC::-webkit-scrollbar { 79 | display: none; 80 | } 81 | #app-mount #status-picker .scroller-3BxosC .item-1tOPte:not(#status-picker-custom-status) { 82 | background-color: transparent; 83 | padding: 0; 84 | margin: 0 8px; 85 | width: 33px; 86 | margin-left: 0; 87 | } 88 | #app-mount #status-picker .scroller-3BxosC .item-1tOPte:not(#status-picker-custom-status) .status-1fhblQ, #app-mount #status-picker .scroller-3BxosC .item-1tOPte:not(#status-picker-custom-status) .separator-2I32lJ, #app-mount #status-picker .scroller-3BxosC .item-1tOPte:not(#status-picker-custom-status) .description-2L932D { 89 | display: none; 90 | } 91 | #app-mount #status-picker .scroller-3BxosC .item-1tOPte:not(#status-picker-custom-status) .status-1AY8sU { 92 | background-color: var(--status-color); 93 | -webkit-transition: all 300ms; 94 | transition: all 300ms; 95 | } 96 | #app-mount #status-picker .scroller-3BxosC .item-1tOPte:not(#status-picker-custom-status):hover .status-1AY8sU, #app-mount #status-picker .scroller-3BxosC .item-1tOPte:not(#status-picker-custom-status).focused-3afm-j .status-1AY8sU { 97 | background-color: var(--status-color-hover) !important; 98 | } 99 | #app-mount #status-picker .scroller-3BxosC .item-1tOPte:not(#status-picker-custom-status) .statusItem-33LqPf { 100 | margin-top: -4px; 101 | } 102 | #app-mount #status-picker .scroller-3BxosC .item-1tOPte:not(#status-picker-custom-status) .statusItem-33LqPf svg { 103 | width: 25px; 104 | height: 25px; 105 | } 106 | #app-mount #status-picker .scroller-3BxosC .item-1tOPte:not(#status-picker-custom-status)#status-picker-online { 107 | --status-color: var(--online); 108 | --status-color-hover: var(--online-hover); 109 | margin-right: 0; 110 | margin-left: -3px; 111 | } 112 | #app-mount #status-picker .scroller-3BxosC .item-1tOPte:not(#status-picker-custom-status)#status-picker-idle { 113 | --status-color: var(--idle); 114 | --status-color-hover: var(--idle-hover) ; 115 | } 116 | #app-mount #status-picker .scroller-3BxosC .item-1tOPte:not(#status-picker-custom-status)#status-picker-dnd { 117 | --status-color: var(--dnd); 118 | --status-color-hover: var(--dnd-hover) ; 119 | } 120 | #app-mount #status-picker .scroller-3BxosC .item-1tOPte:not(#status-picker-custom-status)#status-picker-invisible { 121 | --status-color: var(--invisible); 122 | --status-color-hover: var(--invisible-hover); 123 | } 124 | #app-mount #status-picker .scroller-3BxosC .item-1tOPte:not(#status-picker-custom-status)#status-picker-game-activity { 125 | position: fixed; 126 | margin-top: -90px; 127 | margin-left: -30px; 128 | } 129 | #app-mount #status-picker .scroller-3BxosC #status-picker-custom-status { 130 | position: fixed; 131 | background-color: var(--custom-status-bg); 132 | border-radius: var(--border-radius); 133 | margin-top: 40px; 134 | margin-left: -29px; 135 | width: 216px; 136 | } 137 | #app-mount #status-picker .scroller-3BxosC #status-picker-custom-status:hover, #app-mount #status-picker .scroller-3BxosC #status-picker-custom-status.focused-3afm-j { 138 | background-color: var(--custom-status-hover); 139 | } 140 | 141 | #app-mount .container-3baos1 { 142 | position: relative; 143 | } 144 | #app-mount .container-3baos1 .avatarWrapper-2yR4wp[aria-expanded=true] + .nameTag-3uD-yy { 145 | margin-left: 32px; 146 | } 147 | #app-mount .container-3baos1 .avatarWrapper-2yR4wp[aria-expanded=true] + .nameTag-3uD-yy::before { 148 | content: ""; 149 | position: absolute; 150 | pointer-events: none; 151 | background: var(--background-tertiary) var(--placeholder-avatar) center/100% no-repeat; 152 | border-radius: 25px; 153 | height: 32px; 154 | width: 32px; 155 | margin-top: -1px; 156 | left: 8px; 157 | } 158 | #app-mount .container-3baos1 .avatarWrapper-2yR4wp[aria-expanded=true] .avatar-SmRMf2 { 159 | position: absolute; 160 | pointer-events: none; 161 | height: 60px !important; 162 | width: 60px !important; 163 | bottom: 151px; 164 | left: 50%; 165 | border: 5px solid var(--avatar-gap-bg); 166 | -webkit-animation: StatusPickerAvatar 350ms ease forwards; 167 | animation: StatusPickerAvatar 350ms ease forwards; 168 | } 169 | #app-mount .container-3baos1 .avatarWrapper-2yR4wp[aria-expanded=true] .avatar-SmRMf2 foreignObject { 170 | -webkit-mask: none; 171 | mask: none; 172 | border-radius: 25px; 173 | } 174 | #app-mount .container-3baos1 .avatarWrapper-2yR4wp[aria-expanded=true] .avatar-SmRMf2 rect { 175 | display: none; 176 | } -------------------------------------------------------------------------------- /index.scss: -------------------------------------------------------------------------------- 1 | @import "./src/base" -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Status Picker+", 3 | "description": "Makes Discord's status picker look spicier.", 4 | "version": "1.0.4", 5 | "author": "LuckFire#48000", 6 | "theme": "index.scss", 7 | "consent": "true", 8 | "license": "MIT" 9 | } -------------------------------------------------------------------------------- /powercord_manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Status Picker+", 3 | "description": "Makes Discord's status picker look spicier.", 4 | "version": "1.0.4", 5 | "author": "LuckFire#48000", 6 | "theme": "index.scss", 7 | "consent": "true", 8 | "license": "MIT" 9 | } -------------------------------------------------------------------------------- /screenshots/issue1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/discord-extensions-archived/statuspicker-plus/5b945206d005402c693f1d38aec3a20cab898b2b/screenshots/issue1.png -------------------------------------------------------------------------------- /screenshots/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/discord-extensions-archived/statuspicker-plus/5b945206d005402c693f1d38aec3a20cab898b2b/screenshots/preview.png -------------------------------------------------------------------------------- /src/_base.scss: -------------------------------------------------------------------------------- 1 | @import "./root"; 2 | @import "./keyframes"; 3 | 4 | @import "./main/status-picker"; 5 | @import "./main/avatar"; -------------------------------------------------------------------------------- /src/_keyframes.scss: -------------------------------------------------------------------------------- 1 | @keyframes StatusPicker { 2 | 0% { 3 | transform: translateY(5px); 4 | opacity: 0; 5 | } 6 | 100% { 7 | transform: none; 8 | opacity: 1; 9 | } 10 | } 11 | 12 | @keyframes StatusPickerAvatar { 13 | 0% { 14 | transform: translateY(5px) translateX(-50%); 15 | opacity: 0; 16 | } 17 | 100% { 18 | transform: translateX(-50%); 19 | opacity: 1; 20 | } 21 | } -------------------------------------------------------------------------------- /src/_root.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | // Avatar 3 | --avatar-gap-bg: var(--background-secondary); 4 | --placeholder-avatar: url("/assets/6debd47ed13483642cf09e832ed0bc1b.png"); 5 | 6 | // Status Picker 7 | --menu-bg: var(--background-tertiary); 8 | --custom-status-bg: var(--background-secondary-alt); 9 | --box-shadow-color: rgb(0, 0, 0, 0.5); 10 | --custom-status-hover: #5C6FB1; 11 | --border-radius: 3px; 12 | 13 | // Statuses 14 | --online: #43b581; 15 | --online-hover: rgb(67, 182, 131, 0.5); 16 | --idle: #faa61a; 17 | --idle-hover: rgb(250, 166, 26, 0.5); 18 | --dnd: #f04747; 19 | --dnd-hover: rgb(240, 71, 71, 0.5); 20 | --invisible: #747f8d; 21 | --invisible-hover: rgb(116, 127, 141, 0.5); 22 | } -------------------------------------------------------------------------------- /src/main/_avatar.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | .container-3baos1 { 3 | position: relative; 4 | 5 | .avatarWrapper-2yR4wp[aria-expanded="true"] { 6 | + .nameTag-3uD-yy { 7 | margin-left: 32px; 8 | 9 | &::before { 10 | content: ""; 11 | position: absolute; 12 | pointer-events: none; 13 | background: var(--background-tertiary) var(--placeholder-avatar) center/100% no-repeat; 14 | border-radius: 25px; 15 | height: 32px; 16 | width: 32px; 17 | margin-top: -1px; 18 | left: 8px; 19 | } 20 | } 21 | 22 | .avatar-SmRMf2 { 23 | position: absolute; 24 | pointer-events: none; 25 | height: 60px !important; 26 | width: 60px !important; 27 | bottom: 151px; 28 | left: 50%; 29 | border: 5px solid var(--avatar-gap-bg); 30 | animation: StatusPickerAvatar 350ms ease forwards; 31 | 32 | foreignObject { 33 | mask: none; 34 | border-radius: 25px; 35 | } 36 | 37 | rect { 38 | display: none; 39 | } 40 | } 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/main/_status-picker.scss: -------------------------------------------------------------------------------- 1 | #app-mount { 2 | // Removes The Original Animation 3 | .scale-3iLZhb { 4 | opacity: 1; 5 | transform: none; 6 | } 7 | 8 | // Main Code 9 | #status-picker { 10 | z-index: 0; 11 | background: radial-gradient(circle at center 45px, transparent 34px, var(--menu-bg) 0); 12 | border-radius: var(--border-radius); 13 | box-shadow: 0 0 8px var(--box-shadow-color); 14 | margin-bottom: 19px; 15 | width: 224px; 16 | height: 172px; 17 | animation: StatusPicker 350ms ease forwards; 18 | 19 | .scroller-3BxosC { 20 | display: flex; 21 | align-items: flex-start; 22 | margin-top: 40%; 23 | width: 94%; 24 | left: 25px; 25 | 26 | &::-webkit-scrollbar { 27 | display: none; 28 | } 29 | 30 | .item-1tOPte:not(#status-picker-custom-status) { 31 | background-color: transparent; 32 | padding: 0; 33 | margin: 0 8px; 34 | width: 33px; 35 | margin-left: 0; 36 | 37 | .status-1fhblQ, .separator-2I32lJ, .description-2L932D { 38 | display: none; 39 | } 40 | 41 | .status-1AY8sU { 42 | background-color: var(--status-color); 43 | transition: all 300ms; 44 | } 45 | 46 | &:hover, &.focused-3afm-j { 47 | .status-1AY8sU { 48 | background-color: var(--status-color-hover) !important; 49 | } 50 | } 51 | 52 | .statusItem-33LqPf { 53 | margin-top: -4px; 54 | 55 | svg { 56 | width: 25px; 57 | height: 25px; 58 | } 59 | } 60 | 61 | &#status-picker-online { 62 | --status-color: var(--online); 63 | --status-color-hover: var(--online-hover); 64 | margin-right: 0; 65 | margin-left: -3px; 66 | } 67 | 68 | &#status-picker-idle { 69 | --status-color: var(--idle); 70 | --status-color-hover: var(--idle-hover) 71 | } 72 | 73 | &#status-picker-dnd { 74 | --status-color: var(--dnd); 75 | --status-color-hover: var(--dnd-hover) 76 | } 77 | 78 | &#status-picker-invisible { 79 | --status-color: var(--invisible); 80 | --status-color-hover: var(--invisible-hover); 81 | } 82 | 83 | &#status-picker-game-activity { 84 | position: fixed; 85 | margin-top: -90px; 86 | margin-left: -30px; 87 | } 88 | } 89 | 90 | #status-picker-custom-status { 91 | position: fixed; 92 | background-color: var(--custom-status-bg); 93 | border-radius: var(--border-radius); 94 | margin-top: 40px; 95 | margin-left: -29px; 96 | width: 216px; 97 | 98 | &:hover, &.focused-3afm-j { 99 | background-color: var(--custom-status-hover); 100 | } 101 | } 102 | } 103 | } 104 | } -------------------------------------------------------------------------------- /src/support/StatusPickerPlus.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Status Picker Plus 3 | * @version 1.0.4 4 | * @description Makes Discord's status picker look spicier. 5 | * @author LuckFire#4800 6 | * 7 | * @website https://github.com/Discord-Theme-Addons 8 | * @source https://github.com/Discord-Theme-Addons/statuspicker-plus 9 | **/ 10 | 11 | :root { 12 | --avatar-gap-bg: var(--background-secondary); 13 | --placeholder-avatar: url("/assets/6debd47ed13483642cf09e832ed0bc1b.png"); 14 | 15 | --menu-bg: var(--background-tertiary); 16 | --custom-status-bg: var(--background-secondary-alt); 17 | --box-shadow-color: rgb(0, 0, 0, 0.5); 18 | --custom-status-hover: #5C6FB1; 19 | --border-radius: 3px; 20 | 21 | --online: #43b581; 22 | --online-hover: rgb(67, 182, 131, 0.5); 23 | --idle: #faa61a; 24 | --idle-hover: rgb(250, 166, 26, 0.5); 25 | --dnd: #f04747; 26 | --dnd-hover: rgb(240, 71, 71, 0.5); 27 | --invisible: #747f8d; 28 | --invisible-hover: rgb(116, 127, 141, 0.5); 29 | } 30 | 31 | @import url("https://discord-theme-addons.github.io/statuspicker-plus/src/support/compiled.css"); -------------------------------------------------------------------------------- /src/support/StatusPickerPlus.user.css: -------------------------------------------------------------------------------- 1 | @-moz-document domain("discord.com") { 2 | /* ==UserStyle== 3 | @name Status Picker Plus 4 | @description Makes Discord's status picker look spicier 5 | @author LuckFire#400 6 | @namespace github.com/Discord-Theme-Addons/status-picker-plus 7 | @version 1.0.4 8 | ==/UserStyle== */ 9 | 10 | :root { 11 | --avatar-gap-bg: var(--background-secondary); 12 | --placeholder-avatar: url("/assets/6debd47ed13483642cf09e832ed0bc1b.png"); 13 | 14 | --menu-bg: var(--background-tertiary); 15 | --custom-status-bg: var(--background-secondary-alt); 16 | --box-shadow-color: rgb(0, 0, 0, 0.5); 17 | --custom-status-hover: #5C6FB1; 18 | --border-radius: 3px; 19 | 20 | --online: #43b581; 21 | --online-hover: rgb(67, 182, 131, 0.5); 22 | --idle: #faa61a; 23 | --idle-hover: rgb(250, 166, 26, 0.5); 24 | --dnd: #f04747; 25 | --dnd-hover: rgb(240, 71, 71, 0.5); 26 | --invisible: #747f8d; 27 | --invisible-hover: rgb(116, 127, 141, 0.5); 28 | } 29 | 30 | @import url("https://discord-theme-addons.github.io/statuspicker-plus/src/support/compiled.css"); 31 | } -------------------------------------------------------------------------------- /src/support/compiled.css: -------------------------------------------------------------------------------- 1 | @-webkit-keyframes StatusPicker { 2 | 0% { 3 | -webkit-transform: translateY(5px); 4 | transform: translateY(5px); 5 | opacity: 0; 6 | } 7 | 100% { 8 | -webkit-transform: none; 9 | transform: none; 10 | opacity: 1; 11 | } 12 | } 13 | 14 | @keyframes StatusPicker { 15 | 0% { 16 | -webkit-transform: translateY(5px); 17 | transform: translateY(5px); 18 | opacity: 0; 19 | } 20 | 100% { 21 | -webkit-transform: none; 22 | transform: none; 23 | opacity: 1; 24 | } 25 | } 26 | @-webkit-keyframes StatusPickerAvatar { 27 | 0% { 28 | -webkit-transform: translateY(5px) translateX(-50%); 29 | transform: translateY(5px) translateX(-50%); 30 | opacity: 0; 31 | } 32 | 100% { 33 | -webkit-transform: translateX(-50%); 34 | transform: translateX(-50%); 35 | opacity: 1; 36 | } 37 | } 38 | @keyframes StatusPickerAvatar { 39 | 0% { 40 | -webkit-transform: translateY(5px) translateX(-50%); 41 | transform: translateY(5px) translateX(-50%); 42 | opacity: 0; 43 | } 44 | 100% { 45 | -webkit-transform: translateX(-50%); 46 | transform: translateX(-50%); 47 | opacity: 1; 48 | } 49 | } 50 | #app-mount .scale-3iLZhb { 51 | opacity: 1; 52 | -webkit-transform: none; 53 | transform: none; 54 | } 55 | #app-mount #status-picker { 56 | z-index: 0; 57 | background: radial-gradient(circle at center 45px, transparent 34px, var(--menu-bg) 0); 58 | border-radius: var(--border-radius); 59 | -webkit-box-shadow: 0 0 8px var(--box-shadow-color); 60 | box-shadow: 0 0 8px var(--box-shadow-color); 61 | margin-bottom: 19px; 62 | width: 224px; 63 | height: 172px; 64 | -webkit-animation: StatusPicker 350ms ease forwards; 65 | animation: StatusPicker 350ms ease forwards; 66 | } 67 | #app-mount #status-picker .scroller-3BxosC { 68 | display: -webkit-box; 69 | display: -ms-flexbox; 70 | display: flex; 71 | -webkit-box-align: start; 72 | -ms-flex-align: start; 73 | align-items: flex-start; 74 | margin-top: 40%; 75 | width: 94%; 76 | left: 25px; 77 | } 78 | #app-mount #status-picker .scroller-3BxosC::-webkit-scrollbar { 79 | display: none; 80 | } 81 | #app-mount #status-picker .scroller-3BxosC .item-1tOPte:not(#status-picker-custom-status) { 82 | background-color: transparent; 83 | padding: 0; 84 | margin: 0 8px; 85 | width: 33px; 86 | margin-left: 0; 87 | } 88 | #app-mount #status-picker .scroller-3BxosC .item-1tOPte:not(#status-picker-custom-status) .status-1fhblQ, #app-mount #status-picker .scroller-3BxosC .item-1tOPte:not(#status-picker-custom-status) .separator-2I32lJ, #app-mount #status-picker .scroller-3BxosC .item-1tOPte:not(#status-picker-custom-status) .description-2L932D { 89 | display: none; 90 | } 91 | #app-mount #status-picker .scroller-3BxosC .item-1tOPte:not(#status-picker-custom-status) .status-1AY8sU { 92 | background-color: var(--status-color); 93 | -webkit-transition: all 300ms; 94 | transition: all 300ms; 95 | } 96 | #app-mount #status-picker .scroller-3BxosC .item-1tOPte:not(#status-picker-custom-status):hover .status-1AY8sU, #app-mount #status-picker .scroller-3BxosC .item-1tOPte:not(#status-picker-custom-status).focused-3afm-j .status-1AY8sU { 97 | background-color: var(--status-color-hover) !important; 98 | } 99 | #app-mount #status-picker .scroller-3BxosC .item-1tOPte:not(#status-picker-custom-status) .statusItem-33LqPf { 100 | margin-top: -4px; 101 | } 102 | #app-mount #status-picker .scroller-3BxosC .item-1tOPte:not(#status-picker-custom-status) .statusItem-33LqPf svg { 103 | width: 25px; 104 | height: 25px; 105 | } 106 | #app-mount #status-picker .scroller-3BxosC .item-1tOPte:not(#status-picker-custom-status)#status-picker-online { 107 | --status-color: var(--online); 108 | --status-color-hover: var(--online-hover); 109 | margin-right: 0; 110 | margin-left: -3px; 111 | } 112 | #app-mount #status-picker .scroller-3BxosC .item-1tOPte:not(#status-picker-custom-status)#status-picker-idle { 113 | --status-color: var(--idle); 114 | --status-color-hover: var(--idle-hover) ; 115 | } 116 | #app-mount #status-picker .scroller-3BxosC .item-1tOPte:not(#status-picker-custom-status)#status-picker-dnd { 117 | --status-color: var(--dnd); 118 | --status-color-hover: var(--dnd-hover) ; 119 | } 120 | #app-mount #status-picker .scroller-3BxosC .item-1tOPte:not(#status-picker-custom-status)#status-picker-invisible { 121 | --status-color: var(--invisible); 122 | --status-color-hover: var(--invisible-hover); 123 | } 124 | #app-mount #status-picker .scroller-3BxosC .item-1tOPte:not(#status-picker-custom-status)#status-picker-game-activity { 125 | position: fixed; 126 | margin-top: -90px; 127 | margin-left: -30px; 128 | } 129 | #app-mount #status-picker .scroller-3BxosC #status-picker-custom-status { 130 | position: fixed; 131 | background-color: var(--custom-status-bg); 132 | border-radius: var(--border-radius); 133 | margin-top: 40px; 134 | margin-left: -29px; 135 | width: 216px; 136 | } 137 | #app-mount #status-picker .scroller-3BxosC #status-picker-custom-status:hover, #app-mount #status-picker .scroller-3BxosC #status-picker-custom-status.focused-3afm-j { 138 | background-color: var(--custom-status-hover); 139 | } 140 | 141 | #app-mount .container-3baos1 { 142 | position: relative; 143 | } 144 | #app-mount .container-3baos1 .avatarWrapper-2yR4wp[aria-expanded=true] + .nameTag-3uD-yy { 145 | margin-left: 32px; 146 | } 147 | #app-mount .container-3baos1 .avatarWrapper-2yR4wp[aria-expanded=true] + .nameTag-3uD-yy::before { 148 | content: ""; 149 | position: absolute; 150 | pointer-events: none; 151 | background: var(--background-tertiary) var(--placeholder-avatar) center/100% no-repeat; 152 | border-radius: 25px; 153 | height: 32px; 154 | width: 32px; 155 | margin-top: -1px; 156 | left: 8px; 157 | } 158 | #app-mount .container-3baos1 .avatarWrapper-2yR4wp[aria-expanded=true] .avatar-SmRMf2 { 159 | position: absolute; 160 | pointer-events: none; 161 | height: 60px !important; 162 | width: 60px !important; 163 | bottom: 151px; 164 | left: 50%; 165 | border: 5px solid var(--avatar-gap-bg); 166 | -webkit-animation: StatusPickerAvatar 350ms ease forwards; 167 | animation: StatusPickerAvatar 350ms ease forwards; 168 | } 169 | #app-mount .container-3baos1 .avatarWrapper-2yR4wp[aria-expanded=true] .avatar-SmRMf2 foreignObject { 170 | -webkit-mask: none; 171 | mask: none; 172 | border-radius: 25px; 173 | } 174 | #app-mount .container-3baos1 .avatarWrapper-2yR4wp[aria-expanded=true] .avatar-SmRMf2 rect { 175 | display: none; 176 | } --------------------------------------------------------------------------------