Ash4-discord-theme

dnome.css

.theme-dark {
  --text-normal: #ffffff;
  --background-primary: #353535;
  --background-secondary: #2d2d2d;
  --background-secondary-alt: #313131;
  --background-tertiary: #282828;
  --background-accent: #1b6acb;
  --background-floating: #282828;
  --background-mobile-primary: #353535;
  --background-mobile-secondary: #2d2d2d;
  --background-modifier-selected: #353535;
  --background-modifier-accent: #282828;
  --background-mentioned: rgba(245, 121, 0, 0.05);
  --background-mentioned-hover: rgba(245, 121, 0, 0.08);
  --background-message-hover: rgba(40, 40, 40, 0.3);
  --background-help-warning: rgba(245, 121, 0, 0.1);
  --background-help-info: rgba(27, 106, 203, 0.1);
  --scrollbar-thin-thumb: #a4a4a3;
  --scrollbar-thin-track: transparent;
  --scrollbar-auto-thumb: #a4a4a3;
  --scrollbar-auto-track: #313131;
  --scrollbar-auto-scrollbar-color-thumb: #a4a4a3;
  --scrollbar-auto-scrollbar-color-track: #2d2d2d;
  --channeltextarea-background: #2d2d2d;
  --logo-primary: #1b6acb;
  --focus-primary: #1b6acb;
  --activity-card-background: #282828;
  --textbox-markdown-syntax: #1b6acb;
  --radio-group-dot-foreground: #1b6acb;
  --dnome-base: #2d2d2d;
  --dnome-bg: #353535;
  --dnome-sidebar: #313131;
  --dnome-border: #1b1b1b;
  --dnome-dark-fill: #282828;
  --dnome-scroll-bg: #313131;
  --dnome-fg: #eeeeec;
  --dnome-scrollbar-slider-color: #a4a4a3;
  --dnome-accent: #1b6acb;
  --dnome-link-color: #629fea;
  --dnome-text-color: #ffffff;
  --dnome-warning: #f57900;
  --dnome-darker-base: #202020;
  --dnome-darker-accent: #15539e;
  --dnome-faded-accent: rgba(27, 106, 203, 0.4);
  --dnome-error: #cc0000;
}
.theme-light {
  --text-normal: #000000;
  --background-primary: #f6f5f4;
  --background-secondary: #ffffff;
  --background-secondary-alt: #fbfafa;
  --background-tertiary: #f2f0ef;
  --background-accent: #3584e4;
  --background-floating: #f2f0ef;
  --background-mobile-primary: #f6f5f4;
  --background-mobile-secondary: #ffffff;
  --background-modifier-selected: #f6f5f4;
  --background-modifier-accent: #f2f0ef;
  --background-mentioned: rgba(245, 121, 0, 0.05);
  --background-mentioned-hover: rgba(245, 121, 0, 0.08);
  --background-message-hover: rgba(242, 240, 239, 0.3);
  --background-help-warning: rgba(245, 121, 0, 0.1);
  --background-help-info: rgba(53, 132, 228, 0.1);
  --scrollbar-thin-thumb: #7e8182;
  --scrollbar-thin-track: transparent;
  --scrollbar-auto-thumb: #7e8182;
  --scrollbar-auto-track: #cecece;
  --scrollbar-auto-scrollbar-color-thumb: #7e8182;
  --scrollbar-auto-scrollbar-color-track: #ffffff;
  --channeltextarea-background: #ffffff;
  --logo-primary: #3584e4;
  --focus-primary: #3584e4;
  --activity-card-background: #f2f0ef;
  --textbox-markdown-syntax: #3584e4;
  --radio-group-dot-foreground: #1b6acb;
  --dnome-base: #ffffff;
  --dnome-bg: #f6f5f4;
  --dnome-sidebar: #fbfafa;
  --dnome-border: #cdc7c2;
  --dnome-dark-fill: #f2f0ef;
  --dnome-scroll-bg: #cecece;
  --dnome-fg: #2e3436;
  --dnome-scrollbar-slider-color: #7e8182;
  --dnome-accent: #3584e4;
  --dnome-link-color: #629fea;
  --dnome-text-color: #000000;
  --dnome-warning: #f57900;
  --dnome-darker-base: #f2f2f2;
  --dnome-darker-accent: #1b6acb;
  --dnome-faded-accent: rgba(27, 106, 203, 0.3);
  --dnome-error: #cc0000;
}
.theme-dark div[class*="autocomplete-"],
.theme-light div[class*="autocomplete-"],
.theme-dark div[class*="tierHeaderLocked-"],
.theme-light div[class*="tierHeaderLocked-"] {
  background-color: var(--dnome-dark-fill);
}
.theme-dark div[class*="selectable-"],
.theme-light div[class*="selectable-"],
.theme-dark div[class*="perksModal"],
.theme-light div[class*="perksModal"] {
  background-color: var(--dnome-base);
}
.theme-dark div[class*="autocompleteRowVertical"] > div[class*="selectable-"][class*="selected-"],
.theme-light div[class*="autocompleteRowVertical"] > div[class*="selectable-"][class*="selected-"] {
  background-color: var(--dnome-bg) !important;
}
.theme-dark div[class*="selected-"]:not([class*="tabBarItem"], [class*="gifFavoriteButton"]),
.theme-light div[class*="selected-"]:not([class*="tabBarItem"], [class*="gifFavoriteButton"]),
.theme-dark div[class*="tierBody"],
.theme-light div[class*="tierBody"],
.theme-dark ul[class*="perks"] > li[class*="perk-"],
.theme-light ul[class*="perks"] > li[class*="perk-"] {
  background-color: var(--dnome-bg);
}
.theme-dark div[class*="uploadModal-"],
.theme-light div[class*="uploadModal-"] {
  background-color: var(--background-primary);
}
.theme-dark div[class*="uploadModal-"] > div[class*="footer"],
.theme-light div[class*="uploadModal-"] > div[class*="footer"] {
  background-color: var(--background-tertiary);
}
.theme-dark div[class*="peopleColumn-"],
.theme-light div[class*="peopleColumn-"] {
  background-color: var(--background-primary);
}
div[class*="colorDefault"]:not([class*="hideInteraction"]):hover,
div[class*="colorDefault"][class*="focused"] {
  background-color: var(--dnome-accent);
}
div[class*="colorDefault"]:active {
  background-color: var(--dnome-darker-accent) !important;
}
div[class*="colorDefault"][class*="colorBrand"]:not(:hover) {
  color: var(--interactive-normal);
}
div[class*="colorDefault"] path[class*="checkbox-"] {
  color: var(--dnome-accent);
}
div[class*="colorBrand"] {
  color: var(--dnome-accent);
}
div[class*="wrapper"][class*="selected"] > div[class*="childWrapper"],
div[class*="wrapper"]:hover > div[class*="childWrapper"] {
  background-color: var(--dnome-accent) !important;
}
div[class*="folder-"],
span[class*="expandedFolderBackground"] {
  background-color: var(--background-primary);
}
div[class*="itemCard-"] > div > div[class*="body"] {
  background-color: var(--dnome-bg);
}
div[class*="itemCard-"]:hover {
  background-color: var(--dnome-darker-base) !important;
}
div[style*="background-color: rgb(67, 181, 129)"] {
  background-color: var(--dnome-accent) !important;
}
div[class*="selectedCategoryItem"][class*="categoryItem"] > div[class*="itemInner"] {
  background-color: var(--dnome-accent);
}
button[class*="button-"][class*="lookOutlined-"]:hover {
  background-color: var(--dnome-darker-accent);
}
#search-results {
  background-color: var(--dnome-base);
}
#search-results div[role="option"]:hover,
#search-results div[role="option"][aria-selected="true"] {
  background-color: var(--dnome-dark-fill);
}
#search-results div[role="option"]:after {
  background: transparent;
}
div[class*="modal"][class*="small"] {
  background-color: var(--dnome-base);
}
div[class*="modal"][class*="small"] > div[class*="footer"] {
  background-color: var(--dnome-dark-fill);
}
div[class*="userPopout"] div[class*="headerNormal"] {
  background-color: var(--dnome-dark-fill);
}
div[class*="userPopout"] div[class*="headerPlaying"] {
  background-color: var(--dnome-accent);
}
div[class*="userPopout"] > div[class*="body"],
div[class*="userPopout"] div[class*="footer"],
div[class*="userPopout"] div[class*="root"][aria-label*="Role"] {
  background-color: var(--dnome-dark-fill);
}
div[class*="userPopout"] input {
  border-color: var(--dnome-accent) !important;
}
div[role="dialog"] > div[class*="root-"] {
  background-color: var(--background-primary);
}
div[role="dialog"] > div[class*="root-"] > form > div[class*="footer"] {
  background-color: var(--background-tertiary);
}
div[role="dialog"] > div[class*="root-"] > div[class*="footer"] {
  background-color: var(--background-tertiary);
}
div[role="dialog"] > div[class*="root-"] > div[class*="content"] > div[class*="message"] {
  background-color: var(--background-primary);
}
div[class*="roundButton"][class*="activeButton"] {
  background-color: var(--dnome-accent);
}
div[class*="tierBody"] {
  background-color: var(--dnome-base) !important;
}
div[class*="noTabBar-"],
div[class*="userInfoSection-"],
div[class*="connectedAccount-"],
div[class*="tabBarContainer-"] {
  border-color: var(--dnome-bg) !important;
}
div[class*="paymentPane-"] {
  background-color: var(--dnome-base) !important;
}
div[class*="paymentPane-"] > div[class*="paginator-"] {
  background-color: var(--dnome-base) !important;
}
div[class*="paymentPane-"] > div[class*="paginator-"] > div[class*="bottomDivider-"] {
  border-color: var(--dnome-bg) !important;
}
div[class*="paymentPane-"] > div[class*="paginator-"] > div[class*="bottomDivider-"] > div[class*="payment-"] {
  border-color: var(--dnome-bg) !important;
  background-color: var(--dnome-base) !important;
}
div[class*="paymentPane-"] > div[class*="paginator-"] > div[class*="bottomDivider-"] > div[class*="payment-"] > div[class*="expandedInfo-"] {
  border-color: var(--dnome-base) !important;
}
div[class*="mentioned-"]::before {
  background-color: var(--dnome-warning);
}
[class*="lookFilled"][class*="color"]:not([class*="colorPrimary"]) {
  background-color: var(--dnome-accent) !important;
}
div[class*="control"] > div[style*="background-color: rgb(59, 165, 92)"],
div[class*="control"] div[style*="background-color: rgb(94, 135, 113)"],
div[class*="control"] div[style*="background-color: rgb(78, 149, 104)"],
div[class*="control"] div[style*="background-color: rgb(95, 134, 114)"] {
  background-color: var(--dnome-accent) !important;
}
circle[class*="radioIconForeground"] {
  color: var(--dnome-accent);
}
div[class*="checkbox"][class*="checked"] {
  border-color: var(--dnome-accent) !important;
  background-color: var(--dnome-faded-accent) !important;
}
div[class*="checkbox"][class*="checked"] > svg > path {
  fill: var(--dnome-accent);
}
div[class*="checkbox"][class*="checked"][style*="background-color: rgb(114, 137, 218)"] {
  background-color: var(--dnome-accent) !important;
}
div[class*="checkbox"][class*="checked"][style*="background-color: rgb(114, 137, 218)"] > svg > path {
  fill: #ffffff;
}
div[class*="newMessagesBar"],
div[class*="topSectionPlaying"] {
  background-color: var(--dnome-accent);
}
svg[class*="premiumIcon"] {
  color: var(--dnome-accent);
}
button[class*="shinyButton"] > div[class*="premiumSubscribeButton"] > svg[class*="premiumIcon"] {
  color: #fff;
}
div[class*="tipTitle"] {
  color: var(--dnome-accent);
}
div[class*="colorPremium"] svg[class*="icon-"] {
  color: var(--dnome-accent);
}
span[class*="botTag-"] {
  background-color: var(--dnome-accent);
}
span[class*="botTag-"][class*="botTagInvert-"] {
  background-color: #fff;
  color: var(--dnome-accent);
}
div[class*="previewContainer-"] > div[class*="previewOverlay-"] {
  background-color: var(--background-secondary) !important;
  border-color: var(--background-primary) !important;
}
span[class*="wrapper-"][class*="mention"] {
  color: var(--dnome-link-color);
  background-color: var(--background-help-info);
}
span[class*="wrapper-"][class*="mention"]:not([class*="hideInteraction"]):hover {
  color: #ffffff !important;
  background-color: var(--dnome-link-color) !important;
}
div[class*="warning"] {
  border-color: var(--dnome-warning);
}
[class*="defaultValue-"] > div[class*="markValue-"] {
  color: var(--dnome-accent) !important;
}
div[class*="barFill"] {
  background-color: var(--dnome-accent);
}
div[class*="progressContainer"] > div > div[class*="progressBar"] {
  background-color: var(--dnome-accent) !important;
}
div[class*="isUnread"] {
  border-color: var(--dnome-accent);
}
div[class*="isUnread"] > span[class*="unreadPill"] {
  background-color: var(--dnome-accent);
}
div[class*="isUnread"] > span[class*="unreadPill"] > svg > path[class*="unreadPillCap"] {
  color: var(--dnome-accent);
  fill: var(--dnome-accent);
}
div[class*="isUnread"] > span[class*="content"] {
  color: var(--dnome-accent);
}
div[class*="circleIconButton"] {
  color: var(--dnome-accent);
}
div[class*="circleIconButton"][class*="selected"] {
  background-color: var(--dnome-accent) !important;
}
button[class*="buttonColor"] {
  color: #ffffff !important;
}
div[class*="uploadModalIn-"] div[class*="uploadDropModal-"] div[class*="bgScale-"] {
  background-color: var(--dnome-accent);
}
div[class*="uploadModalIn-"] div[class*="uploadDropModal-"][class*="error-"] {
  background-color: var(--dnome-error);
}
div[class*="uploadModalIn-"] div[class*="uploadDropModal-"][class*="error-"] div[class*="instructions"] {
  color: #ffffffee;
}
div[class*="reactionMe"] {
  background-color: var(--dnome-faded-accent) !important;
  border-color: var(--dnome-accent) !important;
}
div[class*="notice-"] {
  background-color: var(--dnome-accent);
}
div[class*="notice-"][class*="colorBrand"] {
  color: #fff;
}
div[class*="fakeButton-"] {
  background-color: var(--dnome-accent);
}
svg[class*="iconTierThree-"] {
  color: #fff;
}
div[class*="flowerStarContainer"] > svg[class*="flowerStar"] > path {
  fill: var(--dnome-accent);
}
button[class*="selectorButton-"][class*="selectorButtonSelected"] {
  background-color: var(--dnome-accent);
}
button[class*="selectorButton-"]:not([class*="selectorButtonPremiumRequired-"]):hover {
  background-color: var(--dnome-accent);
}
div[class*="sourceThumbnail"][class*="selected"] {
  box-shadow: inset 0 0 0 2px var(--dnome-accent);
}
div[class*="search-"] > div[class*="searchBox-"]:focus-within,
div[class*="search-"] > div[class*="searchBox-"]:focus {
  -webkit-box-shadow: 0 0 0 1px var(--dnome-accent), 0 0 0 2px var(--dnome-link-color), 0 0 0 3px var(--dnome-link-color) !important;
  box-shadow: 0 0 0 1px var(--dnome-accent), 0 0 0 2px var(--dnome-link-color), 0 0 0 3px var(--dnome-link-color) !important;
}
div[class*="premiumIndicator-"] {
  background-color: var(--dnome-accent) !important;
}
div[aria-controls="Discord Nitro-tab"][aria-selected="false"],
div[aria-controls="GUILD_PREMIUM-tab"][aria-selected="false"] {
  color: var(--interactive-normal) !important;
}
div[aria-controls="Discord Nitro-tab"][aria-selected="false"][style*="background-color"],
div[aria-controls="GUILD_PREMIUM-tab"][aria-selected="false"][style*="background-color"] {
  background-color: var(--background-modifier-hover) !important;
}
div[aria-controls="Discord Nitro-tab"][aria-selected="true"],
div[aria-controls="GUILD_PREMIUM-tab"][aria-selected="true"] {
  color: var(--interactive-active) !important;
  background-color: var(--background-modifier-selected) !important;
}
div[aria-controls="Discord Nitro-tab"] > div > svg[class*="icon-"],
div[aria-controls="GUILD_PREMIUM-tab"] > div > svg[class*="icon-"] {
  display: none !important;
}
div[aria-label="Exclusive to Nitro"] {
  display: none !important;
}

main.css

/* Color scheme + misc */
@import url("https://gist.githubusercontent.com/AshtakaOOf/b513423b4c9df2919e8720227426f4c5/raw/8d1b5dd9f45ce3d7250474d1f73da71c436bcd25/dnome.css");

/* Radial status */
@import url("https://gist.githubusercontent.com/AshtakaOOf/b513423b4c9df2919e8720227426f4c5/raw/f847aa689ea1de8214f7fdce2ad9860d9d5815e5/radial1.css");
@import url("https://gist.githubusercontent.com/AshtakaOOf/b513423b4c9df2919e8720227426f4c5/raw/f847aa689ea1de8214f7fdce2ad9860d9d5815e5/radial2.css");

/* Horizontal server bar */
@import url("https://gist.githubusercontent.com/AshtakaOOf/b513423b4c9df2919e8720227426f4c5/raw/50cd92a188c12b4a2d65f93006d8954b03a5f012/server1.css");
@import url("https://gist.githubusercontent.com/AshtakaOOf/b513423b4c9df2919e8720227426f4c5/raw/50cd92a188c12b4a2d65f93006d8954b03a5f012/server2.css");

radial1.css

:root {
  /*
   * Spacing
   */
  --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 */

  /*
   * Widths
   */
  --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 */

  /*
   * Shape
   */
  --rs-avatar-shape: 50%; /* 50% for round - 0% for square */

  /*
   * Colours
   */
  --rs-online-color: #43b581; /* Colour for online status */
  --rs-idle-color: #faa61a; /* Colour for idle status */
  --rs-dnd-color: #f04747; /* Colour for dnd status */
  --rs-offline-color: #636b75; /* Colour for offline status */
  --rs-streaming-color: #643da7; /* Colour for streaming status */
  --rs-invisible-color: #747f8d; /* Colour for invisible status - Note: this will only show for your own invisibility */
  --rs-self-speaking-color: #57d39b; /* Colour for speaking ring in the bottom left while in a voice chat/call */
  --rs-phone-color: var(--rs-online-color); /* Colour of the ring and phone icon when a user is on their phone  */

  /*
   * Others
   */
  --rs-phone-visible: block; /* Visibility of the phone icon next to a users avatar. | block = visible | none = hidden */
}

radial2.css

:root {
	--rs-version: '2.0.8';
}

#app-mount {
	.wrapper-1VLyxH {
		border-radius: var(--rs-avatar-shape);
	
		// Remove masks
		svg:not(:root) {
			overflow: visible;
		}
		foreignObject {
			mask: none;
		}
	
		// Typing indicator
		.dots-1BwzZQ circle {
			cy: -8 !important;
			&:nth-child(1) {
				cx: -8.5 !important;
			}
			&:nth-child(2) {
				cx: -2.25 !important;
			}
			&:nth-child(3) {
				cx: 4 !important;
			}
		}
		.mask-1FEkla > rect[x="22"] {
			x: 0;
			y: 0;
		}
		.pointerEvents-9SZWKj[x="14.5"] {
			fill: rgba(0,0,0,0.5) !important;
			width: 30px;
			height: 30px;
			x: 1;
			y: 1;
		}
	
		// Avatar shape
		img, &.avatar-AvHqJA {
			border-radius: var(--rs-avatar-shape);
		}
	
		// Updated status, user typing and bottom left avatar
		svg[width="25"][height="15"] > rect {
			rx: calc(var(--rs-avatar-shape) * 2) !important;
			ry: calc(var(--rs-avatar-shape) * 2) !important;
		}
		&[style*="80px"], &[style*="120px"] {
			svg.cursorDefault--wfhy5 rect {
				ry: calc(var(--rs-avatar-shape) * 3.3);
				rx: calc(var(--rs-avatar-shape) * 3.3);
			}
		}
	
		// Status ring
		rect {
			x: 0;
			y: 0;
			width: 100%;
			height: 100%;
			mask: none;
			display: block;
			rx: var(--rs-avatar-shape);
			ry: var(--rs-avatar-shape);
			fill: transparent !important;
			stroke-width: var(--rs-small-width);
			&[fill="#43b581"],
			&[fill="#3ba55c"],
			&[fill="rgba(67, 181, 129, 1)"],
			&[mask*="online"],
			&[fill*="hsl(139"] {
				stroke: var(--rs-online-color);
			}
			&[fill="#faa61a"],
			&[fill="rgba(250, 166, 26, 1)"],
			&[mask*="idle"],
			&[fill*="hsl(38"] {
				stroke: var(--rs-idle-color);
			}
			&[fill="#f04747"],
			&[fill="rgba(240, 71, 71, 1)"],
			&[fill="#ed4245"],
			&[mask*="dnd"],
			&[fill*="hsl(359"] {
				stroke: var(--rs-dnd-color);
			}
			&[fill="#593695"],
			&[mask*="streaming"] {
				stroke: var(--rs-streaming-color);
			}
			&[fill="#747f8d"],
			&[mask*="offline"],
			&[fill="NaN"] {
				stroke: var(--rs-offline-color);
			}
			&[fill="#747f8d"],
			&[mask*="invisible"],
			&[fill="rgba(116, 127, 141, 1)"],
			&[fill*="hsl(214"] {
				stroke: var(--rs-invisible-color);
			}
			&[x="16"] {
				width: 24px;
				height: 24px;
			}
			&[x="28"] {
				width: 40px;
				height: 40px;
				overflow: visible;
			}
		}
	
		// Members list
		&[style*="32px"] rect {
			width: 32px;
			height: 32px;
			x: -14.5;
			y: -17;
			position: relative;
			z-index: 0;
		}
	
		// Chat avatars (StatusEverywhere)
		&[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);
			}
			foreignObject[mask*="mobile"] img {
				width: calc(100% - 12px);
			}
		}
	
		// Medium ring (user popout)
		&[style*="80px"] {
			// Updated status
			svg.cursorDefault--wfhy5 rect {
				x: -48;
				y: -52;
			}
			rect {
				width: 80px;
				height: 80px;
				stroke-width: var(--rs-medium-width);
			}
			img {
				clip-path: inset(calc(var(--rs-medium-spacing) + 1px) calc(var(--rs-medium-spacing) + 1px) round var(--rs-avatar-shape));
			}
		}
		
		// Large ring (user profile)
		&[style*="120px"] {
			// Updated status
			svg.cursorDefault--wfhy5 rect {
				x: -70;
				y: -76;
			}
			rect {
				width: 120px;
				height: 120px;
				stroke-width: var(--rs-large-width);
			}
			img {
				clip-path: inset(calc(var(--rs-large-spacing) + 1px) calc(var(--rs-large-spacing) + 1px) round var(--rs-avatar-shape));
			}
		}
	
		// Fixes DBFBD chat avatars
		&:not([style*="80px;"]):not([style*="120px;"]):not([style*="16px"]) > svg > foreignObject:not(:only-child) img {
			clip-path: inset(calc(var(--rs-small-spacing) + 1px) calc(var(--rs-small-spacing) + 1px) round var(--rs-avatar-shape));
		}
	
		// UserTypingAvatars
		&[style="width: 16px; height: 16px;"] {
			rect {
				display: none;
			}
			img {
				clip-path: none;
			}
		}
	
		// Mobile indicator
		foreignObject[mask*="mobile"] {
			width: calc(100% + 4px);
			&[width="32"] {
				img {
					width: calc(100% - 12px);
				}
			}
			&[width="80"] {
				img {
					width: calc(100% - 16px);
				}
				&:after {
					width: 14px;
					height: 18px;
					top: 75%;
				}
			}
			&[width="120"] {
				img {
					width: calc(100% - 22px);
				}
				&:after {
					width: 24px;
					height: 20px;
					top: 75%;
				}
			}
			&:after {
				content: "";
				display: var(--rs-phone-visible, block);
				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;
				width: 10px;
				height: 14px;
				top: 50%;
				transform: translateY(-50%);
				right: 0;
				background: var(--rs-phone-color, var(--rs-online-color));
				z-index: 1;
			}
		
			& + rect {
				stroke: var(--rs-phone-color, var(--rs-online-color));
			}
		}
	}

	// Bottom left avatar, speaking in VC
	.avatarStack-3vfSFa {
		position: relative;
	}
	.avatarSpeaking-33RRJU {
		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);
	}
	
	// Mobile and typing fix for status everywhere plugins
	.message-2CShn3 .wrapper-1VLyxH {
		foreignObject[mask*="mobile"] {
			width: calc(100% + 3px);
		}
		rect[mask*="typing"] {
				width: calc(100% - 9px);
		}
	}
	
	// Avatar hint
	.avatarHint-k7pYop foreignObject {
		mask: none;
	}
	.avatarHintInner-2HUAWj {
		border-radius: var(--rs-avatar-shape) !important;
		padding-top: 0;
		width: calc(100% - var(--rs-medium-width) - var(--rs-medium-spacing) + 1px * 2);
		height: calc(100% - var(--rs-medium-width) - var(--rs-medium-spacing) + 1px * 2);
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		position: relative;
	}
	
	// Offline
	.memberOffline-2lN7gt img {
		clip-path: none !important;
	}
	.offline-22aM7E img {
		clip-path: none !important;
	}
	
	// Webhook popout
	.avatarWrapperNonUserBot-3fzpUZ .wrapper-1VLyxH img {
		clip-path: none !important;
	}
	
	// Fix clipping on user friends tab
	.userInfo-2WpsYG .wrapper-1VLyxH {
		margin-top: 1px;
		margin-left: 1px;
	}
	
	// Version info
	.info-3pQQBb .line-18uChy:last-child:after {
		content: "RadialStatus " var(--rs-version);
		display: block;
	}
}

server1.css

:root {
  --server-size: var(--HSL-server-icon-size, var(--HSL-size, 35px));
  --server-spacing: var(--HSL-server-spacing, var(--HSL-spacing, 10px));
  --server-container: calc(var(--server-size) + 20px);
  --server-direction: var(--HSL-server-direction, column);
  --server-alignment: var(--HSL-server-alignment, flex-start);
}

#app-mount {
  .app-3xd6d0 .base-2jDfDU {
    top: var(--server-container) !important;
    position: absolute !important;
    left: 0 !important;
    right: 0;
    bottom: 0;
		max-width: 100%;
  }

  .sidebar-1tnWFu {
    border-radius: 0;
  }

  [class*="unreadMentionsIndicator"] {
    width: var(--server-size);
    padding: 0;
    left: 50%;
    transform: translateX(-50%);
    height: auto;
  }

  .guilds-2JjMmN {
    transform-origin: top left;
    transform: rotate(-90deg);
    height: 100vw !important;
    width: var(--server-container);
    top: var(--server-container);
    bottom: unset;
    position: absolute !important;
    left: 0;

		& > [data-list-id="guildsnav"] {
			margin-bottom: 0 !important;
		}

    .scrollerWrap-1IAIlv {
      width: calc(100% + 30px);
    }

    .scrollerBase-_bVAAt {
      padding: var(--server-spacing) 0 !important;
      display: flex;
      flex-direction: var(--server-direction);
      gap: var(--server-spacing);
      align-items: var(--server-alignment);
      justify-content: var(--server-alignment);

      & > div[style]:not(.listItem-2P_4kh) {
        height: auto !important;
        &[style*="height: 0px"] {
          padding-top: 1px;
        }
      }
      & > div[aria-label] {
        display: flex;
        flex-direction: var(--server-direction);
        gap: var(--server-spacing);
      }
    }

    .svg-2zuE5p,
    .wrapper-28eC3z,
    .guildsError-b7zR5H,
    .placeholderMask-2FHNZU {
      width: var(--server-size);
      height: var(--server-size);
    }

    [role="group"] {
      height: auto !important;
    }

    [class*="pill"] {
      transform: rotate(90deg) translateY(-50%);
      height: var(--server-size);
      width: 4px;
      top: calc(var(--server-size) / -1 + var(--server-size) / 2 - 8px) !important;
      margin-left: -2px;
      span {
        height: 100% !important;
        width: 4px !important;
        transform: scale(0,1) !important;
        transition: 0.15s ease !important;
        margin-left: 0;
        border-radius: 0 4px 4px 0;
      }
      @for $i from 0 through 8 {
        span[style*="height: #{$i}"] {
          transform: scale(1,.24) !important;
        }
      }
      // Hovered
      @for $i from 9 through 20 {
        span[style*="height: #{$i}"] {
          transform: scale(1,.7) !important;
        }
      }
      // Selected
      @for $i from 21 through 40 {
        span[style*="height: #{$i}"] {
          transform: scale(1,1) !important;
        }
      }
    }

    .wrapper-z5ab_q {
      height: var(--server-size) !important;
    }
    .wrapper-38slSD {
      width: var(--server-container);
      display: flex;
      flex-direction: var(--server-direction);
      gap: var(--server-spacing);
      ul[role="group"] {
        display: flex;
        flex-direction: var(--server-direction);
        gap: var(--server-spacing);
      }
    }

    [class*="listItem"]:not([class*="listItemWrapper"]) {
      width: var(--server-size);
      transform: rotate(90deg);
      margin: 0 10px;
      position: unset;
    }

    [class*="guildSeparator"] {
      transform: rotate(90deg);
      width: var(--server-size);
    }

    [class*="expandedFolderBackground"] {
      width: var(--server-size);
      left: 50%;
      border-radius: 10px;
      transform: translateX(-50%);
      height: 100%;
    }

    .folder-21wGz3 {
      background: transparent;
    }

    // Dragging server indicator
    .wrapper-3XVBev {
      top: 0;
      bottom: 0;
    }
    .target-1eRTCg::before {
      top: 0;
      height: var(--server-size);
      width: 4px;
      left: -6px;
    }

		&.hidden-10MsGQ + .base-2jDfDU {
			top: 0 !important;
		}
  }
  [class*="listItemTooltip"] {
    position: absolute;
    max-width: unset;
    white-space: nowrap;
    margin-left: calc(var(--server-size) / -1 - 20px);
    top: calc(var(--server-size) - 10px);
    [class*="tooltipPointer"] {
      transform: rotate(180deg);
      top: -5px !important;
      right: unset;
      left: 13px;
      z-index: 1;
    }
  }

  // OnlineFriendCount by Zerethox
  .friendsOnline-2JkivW {
    position: absolute;
    transform: translate(-50%, 50%);
    top: calc(-50% + var(--server-spacing));
    left: calc(-50%);
    width: calc(var(--server-size) + var(--server-spacing));
    display: flex;
    justify-content: center;
  }

  // Server Folders by DevilBro and BetterFolders by Juby210 & Lighty
  .guilds-2JjMmN.content-Pph8t6, .BF-folderSidebar {
    position: absolute !important;
    top: calc(var(--server-container) * 2) !important;
    &:not(.closed-j55_T-) + .base-2jDfDU {
      top: calc(var(--server-container) * 2.5) !important;
    }
  }

  // ReadAllNotifications by DevilBro
  .guilds-2JjMmN .frame-oXWS21[class*="listItem"] {
    height: var(--server-size) !important;
    .wrapper-3kah-n {
      height: 100% !important;
    }
    .button-Jt-tIg {
      width: 100%;
      height: 100% !important;
      border-radius: 50%;
      padding: 2px;
      font-size: 10px;
      box-sizing: border-box;
      text-align: center;
    }
  }

  // BetterFolders by Juby210 & Lighty
  .BF-folderSidebar {
    top: calc(var(--server-container)) !important;
  }

  // ServerCounter by DevilBro
  .serverCountWrap-k8F5De {
    height: var(--server-size);
  }
  .serverCount-FsTTs1 {
    white-space: pre-line;
    font-size: 12px;
    display: flex;
    align-items: center;
  }
}
html.platform-osx #app-mount {
  .typeMacOS-3EmCyP {
    width: 100%;
  }
  .base-2jDfDU {
    top: calc(var(--server-container) + 30px) !important;
  }
  #pluginNotice {
    top: 32px;
    z-index: 100000 !important;
  }
}


body.foldercontentopened .base-2jDfDU {
  transition: 0.2s ease !important;
}

server2.css

:root {
  --HSL-server-icon-size: 40px;  /* Size of the server icons | DEFAULT: 40px */
  --HSL-server-spacing: 10px;  /* Spacing between each server icon | DEFAULT: 10px */
  --HSL-server-direction: column; /* Direction of the server list. | OPTIONS: column, column-reverse | DEFAULT: column */
  --HSL-server-alignment: flex-start; /* Alignment of the server list. | OPTIONS: flex-start, center, flex-end | DEFAULT: flex-start */
}

Source: https://github.com/GeopJr/DNOME