legcord/themes/RadialStatus/src.css

/**
 * @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,<svg aria-hidden="true" focusable="false" data-prefix="fas" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M272 0H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h224c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zM160 480c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm112-108c0 6.6-5.4 12-12 12H60c-6.6 0-12-5.4-12-12V60c0-6.6 5.4-12 12-12h200c6.6 0 12 5.4 12 12v312z"></path></svg>') center no-repeat;
          mask: url('data:image/svg+xml; utf-8,<svg aria-hidden="true" focusable="false" data-prefix="fas" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M272 0H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h224c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zM160 480c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm112-108c0 6.6-5.4 12-12 12H60c-6.6 0-12-5.4-12-12V60c0-6.6 5.4-12 12-12h200c6.6 0 12 5.4 12 12v312z"></path></svg>') 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;
}