/** * @name RadialStatus * @author Gibbu#1211 and srp * @version 2.0.0 * @description Changes the status icons to wrap around the avatar. Shape can be changed inside the theme file. * @source https://git.hl.srp.life/srp/legcord/src/branch/main/themes/RadialStatus * @updateUrl https://git.hl.srp.life/srp/legcord/raw/branch/main/themes/RadialStatus/src.css */ :root { --rs-small-spacing: 2px; /* Gap between avatar and status for members list/dms | MUST end in px */ --rs-medium-spacing: 3px; /* Gap between avatar and status for User popout | MUST end in px */ --rs-large-spacing: 4px; /* Gap between avatar and status for User profiles | MUST end in px */ --rs-small-width: 2px; /* Thickness of status border for members list/dms | MUST end in px */ --rs-medium-width: 3px; /* Thickness of status border for User popout | MUST end in px */ --rs-large-width: 4px; /* Thickness of status border for User profile | MUST end in px */ --rs-avatar-shape: 50%; /* 50% for round - 0% for square */ --rs-online-color: #689d6a; /* Colour for online status */ --rs-idle-color: #d79921; /* Colour for idle status */ --rs-dnd-color: #cc241d; /* Colour for dnd status */ --rs-offline-color: #928374; /* Colour for offline status */ --rs-streaming-color: #b16286; /* Colour for streaming status */ --rs-invisible-color: #a89984; /* Colour for invisible status - Note: this will only show for your own invisibility */ --rs-phone-color: var(--rs-online-color); /* Colour of the ring and phone icon when a user is on their phone | */ --rs-phone-visible: block; /* Visibility of the phone icon next to a users avatar. | block = visible | none = hidden */ --rs-version: "2.0.9"; } #app-mount .wrapper_c51b4e { border-radius: var(--rs-avatar-shape); } #app-mount .wrapper_c51b4e svg:not(:root) { overflow: visible; contain: none; } #app-mount .wrapper_c51b4e foreignObject { -webkit-mask: none; mask: none; } #app-mount .wrapper_c51b4e .dots_ce0450 circle { cy: -8 !important; } #app-mount .wrapper_c51b4e .dots_ce0450 circle:nth-child(1) { cx: -8.5 !important; } #app-mount .wrapper_c51b4e .dots_ce0450 circle:nth-child(2) { cx: -2.25 !important; } #app-mount .wrapper_c51b4e .dots_ce0450 circle:nth-child(3) { cx: 4 !important; } #app-mount .wrapper_c51b4e .mask_c51b4e > rect[x="22"] { x: 0; y: 0; } #app-mount .wrapper_c51b4e .mask_c51b4e > circle { opacity: 0 !important; width: 100%; height: 100%; cx: 43%; cy: 20; } #app-mount .wrapper_c51b4e .pointerEvents_c51b4e[x="14.5"] { fill: rgba(0, 0, 0, 0.5) !important; width: 30px; height: 30px; x: 1; y: 1; } #app-mount .wrapper_c51b4e img, #app-mount .wrapper_c51b4e.avatar_d808b0 { border-radius: var(--rs-avatar-shape); } #app-mount .wrapper_c51b4e svg[width="25"][height="15"] > rect { rx: calc(var(--rs-avatar-shape) * 2) !important; ry: calc(var(--rs-avatar-shape) * 2) !important; } #app-mount .wrapper_c51b4e[style*="80px"] svg.cursorDefault_c51b4e rect, #app-mount .wrapper_c51b4e[style*="120px"] svg.cursorDefault_c51b4e rect { ry: calc(var(--rs-avatar-shape) * 3.3); rx: calc(var(--rs-avatar-shape) * 3.3); } #app-mount .wrapper_c51b4e rect { x: 0; y: 0; width: 100%; height: 100%; -webkit-mask: none; mask: none; display: block; rx: var(--rs-avatar-shape); ry: var(--rs-avatar-shape); fill: transparent !important; stroke-width: var(--rs-small-width); } #app-mount .wrapper_c51b4e rect[fill="#43b581"], #app-mount .wrapper_c51b4e rect[fill="#3ba55c"], #app-mount .wrapper_c51b4e rect[fill="rgba(67, 181, 129, 1)"], #app-mount .wrapper_c51b4e rect[mask*=online], #app-mount .wrapper_c51b4e rect[fill*="hsl(139"], #app-mount .wrapper_c51b4e rect[fill*="var(--status-green"], #app-mount .wrapper_c51b4e rect[fill="#23a55a"] { stroke: var(--rs-online-color); } #app-mount .wrapper_c51b4e rect[fill="#faa61a"], #app-mount .wrapper_c51b4e rect[fill="rgba(250, 166, 26, 1)"], #app-mount .wrapper_c51b4e rect[mask*=idle], #app-mount .wrapper_c51b4e rect[fill*="hsl(38"], #app-mount .wrapper_c51b4e rect[fill*="var(--status-yellow"], #app-mount .wrapper_c51b4e rect[fill="#f0b232"] { stroke: var(--rs-idle-color); } #app-mount .wrapper_c51b4e rect[fill="#f04747"], #app-mount .wrapper_c51b4e rect[fill="rgba(240, 71, 71, 1)"], #app-mount .wrapper_c51b4e rect[fill="#ed4245"], #app-mount .wrapper_c51b4e rect[mask*=dnd], #app-mount .wrapper_c51b4e rect[fill*="hsl(359"], #app-mount .wrapper_c51b4e rect[fill*="var(--status-red"], #app-mount .wrapper_c51b4e rect[fill="#f23f43"] { stroke: var(--rs-dnd-color); } #app-mount .wrapper_c51b4e rect[fill="#593695"], #app-mount .wrapper_c51b4e rect[mask*=streaming], #app-mount .wrapper_c51b4e rect[fill*="var(--status-purple"] { stroke: var(--rs-streaming-color); } #app-mount .wrapper_c51b4e rect[fill="#747f8d"], #app-mount .wrapper_c51b4e rect[mask*=offline], #app-mount .wrapper_c51b4e rect[fill="#80848e"], #app-mount .wrapper_c51b4e rect[fill=NaN] { stroke: var(--rs-offline-color); } #app-mount .wrapper_c51b4e rect[fill="#747f8d"], #app-mount .wrapper_c51b4e rect[mask*=invisible], #app-mount .wrapper_c51b4e rect[fill="rgba(116, 127, 141, 1)"], #app-mount .wrapper_c51b4e rect[fill*="hsl(214"], #app-mount .wrapper_c51b4e rect[fill="var(--status-grey-500)"], #app-mount .wrapper_c51b4e rect[fill="#82858f"] { stroke: var(--rs-invisible-color); } #app-mount .wrapper_c51b4e rect[x="16"] { width: 24px; height: 24px; } #app-mount .wrapper_c51b4e rect[x="28"] { width: 40px; height: 40px; overflow: visible; } #app-mount .wrapper_c51b4e[style*="32px"] rect { width: 32px; height: 32px; x: -14.5; y: -17; position: relative; z-index: 0; } #app-mount .wrapper_c51b4e[style*="40px"] > svg > svg rect { width: 40px; height: 40px; x: -19; y: -20; ry: calc(var(--rs-avatar-shape) * 3.3); rx: calc(var(--rs-avatar-shape) * 3.3); } #app-mount .wrapper_c51b4e[style*="40px"] foreignObject[mask*=mobile] img { width: calc(100% - 18px); } #app-mount .wrapper_c51b4e[style*="80px"] svg.cursorDefault_c51b4e rect { x: -48; y: -52; } #app-mount .wrapper_c51b4e[style*="80px"] rect { width: 80px; height: 80px; stroke-width: var(--rs-medium-width); } #app-mount .wrapper_c51b4e[style*="80px"] img { -webkit-clip-path: inset(calc(var(--rs-medium-spacing) + 1px) calc(var(--rs-medium-spacing) + 1px) round var(--rs-avatar-shape)); clip-path: inset(calc(var(--rs-medium-spacing) + 1px) calc(var(--rs-medium-spacing) + 1px) round var(--rs-avatar-shape)); } #app-mount .wrapper_c51b4e[style*="120px"] svg.cursorDefault_c51b4e rect { x: -70; y: -76; } #app-mount .wrapper_c51b4e[style*="120px"] rect { width: 120px; height: 120px; stroke-width: var(--rs-large-width); pointer-events: none; } #app-mount .wrapper_c51b4e[style*="120px"] img { -webkit-clip-path: inset(calc(var(--rs-large-spacing) + 1px) calc(var(--rs-large-spacing) + 1px) round var(--rs-avatar-shape)); clip-path: inset(calc(var(--rs-large-spacing) + 1px) calc(var(--rs-large-spacing) + 1px) round var(--rs-avatar-shape)); } #app-mount .wrapper_c51b4e:not([style*="80px;"], [style*="120px;"], [style*="16px"]) > svg > foreignObject:not(:only-child) img { -webkit-clip-path: inset(calc(var(--rs-small-spacing) + 1px) calc(var(--rs-small-spacing) + 1px) round var(--rs-avatar-shape)); clip-path: inset(calc(var(--rs-small-spacing) + 1px) calc(var(--rs-small-spacing) + 1px) round var(--rs-avatar-shape)); } #app-mount .wrapper_c51b4e[style="width: 16px; height: 16px;"] rect { display: none; } #app-mount .wrapper_c51b4e[style="width: 16px; height: 16px;"] img { -webkit-clip-path: none; clip-path: none; } #app-mount .wrapper_c51b4e foreignObject[mask*=mobile] { property: inherit; } #app-mount .wrapper_c51b4e foreignObject[mask*=mobile][width="24"]:after { width: 10px; height: 12px; top: 30%; } #app-mount .wrapper_c51b4e foreignObject[mask*=mobile][width="32"]:after { width: 10px; height: 14px; top: 30%; } #app-mount .wrapper_c51b4e foreignObject[mask*=mobile][width="80"]:after { width: 14px; height: 18px; } #app-mount .wrapper_c51b4e foreignObject[mask*=mobile][width="120"]:after { width: 24px; height: 20px; } #app-mount .wrapper_c51b4e foreignObject[mask*=mobile]:after { content: ""; display: var(--rs-phone-visible, block); -webkit-mask: url('data:image/svg+xml; utf-8,') center no-repeat; mask: url('data:image/svg+xml; utf-8,') center no-repeat; position: absolute; right: 0%; bottom: 0%; background: var(--rs-phone-color, var(--rs-online-color)); z-index: 1; } #app-mount .wrapper_c51b4e foreignObject[mask*=mobile] + rect { stroke: var(--rs-phone-color, var(--rs-online-color)); } #app-mount .avatarSpeaking_c51b4e { position: absolute; top: 2px; left: 2px; width: calc(100% - 4px); height: calc(100% - 4px); border-radius: var(--rs-avatar-shape); box-shadow: inset 0 0 0 2px var(--rs-self-speaking-colour, #57d39b), inset 0 0 0 3px var(--background-secondary); } #app-mount .message_d5deea .wrapper_c51b4e foreignObject[mask*=mobile] { width: calc(100% + 3px); } #app-mount .message_d5deea .wrapper_c51b4e rect[mask*=typing] { width: calc(100% - 9px); } #app-mount .avatarHint_f89da9 foreignObject { -webkit-mask: none; mask: none; } #app-mount .avatarHintInner_f89da9 { border-radius: var(--rs-avatar-shape) !important; padding-top: 0; width: calc(100% - var(--rs-medium-width) - var(--rs-medium-spacing) + 2px); height: calc(100% - var(--rs-medium-width) - var(--rs-medium-spacing) + 2px); top: 50%; left: 50%; transform: translate(-50%, -50%); position: relative; } #app-mount .memberOffline-2lN7gt img { -webkit-clip-path: none !important; clip-path: none !important; } #app-mount .offline_a31c43 img { -webkit-clip-path: none !important; clip-path: none !important; } #app-mount .avatarWrapperNonUserBot_f89da9 .wrapper_c51b4e img { -webkit-clip-path: none !important; clip-path: none !important; } #app-mount .userInfo_f3939d .wrapper_c51b4e { margin-top: 1px; margin-left: 1px; } #app-mount .info_c5a741 .line_c5a741:last-child:after { content: "RadialStatus " var(--rs-version); display: block; }