Last active
May 13, 2023 04:34
-
-
Save AshtakaOOf/b513423b4c9df2919e8720227426f4c5 to your computer and use it in GitHub Desktop.
Ash4-discord-theme
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 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"); | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :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 */ | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :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; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :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; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :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 */ | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Source: https://github.com/GeopJr/DNOME