265 lines
11 KiB
CSS
265 lines
11 KiB
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;
|
|
} |