legcord/themes/SoftX/src.css

/**
 * @name SoftX
 * @author Gibbu and srp
 * @version 1.0.0
 * @description A soft and comfy feel for Discord.
 * @source https://git.hl.srp.life/srp/legcord/src/branch/main/themes/SoftX
 * @updateUrl https://git.hl.srp.life/srp/legcord/raw/branch/main/themes/SoftX/src.css
*/

@import url("https://discordstyles.github.io/SoftX/SoftX.css");

/* Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap");
/* Theme imports */
@import url("https://discordstyles.github.io/SoftX/RadialGlow.css"); /* RadialGlow effect for avatars. | Remove this line to disable. */
/*@import url("https://discordstyles.github.io/SoftX/VerticalUserArea.css"); /* Vertical user area. Moves the mute, defean and settings icons to the server list. | Remove this line to disable. */
/*@import url("https://discordstyles.github.io/Addons/windows-titlebar.css"); /* Windows titlebar. | Remove this line to disable. */
:root {
  /*
   * SoftX variables
   */
  --background-image: url("https://i.imgur.com/Nglfni6.png"); /* Background image | URL MUST BE A DIRECT LINK (ending in .jpg, .jpeg, .png, .gif) */
  --background-blur: 0px; /* Blur intensity of --background-image | Must end in px | Default: 0px */
  --accent: 224, 224, 224; /* Colour used around the app. | Values are in R,G,B format. | Default: 0, 231, 169 */
  --channels-width: 300px; /* Width of the channels list. | Default: 300px */
  --guilds-width: 105px; /* Width of the server list. | Default: 105px */
  --members-width: 280px; /* Width of the members list. | Default: 280px */
  --server-size: 50px; /* Size of the servers inside the server list. | Default: 50px */
  --chat-avatar-size: 32px; /* Size of the chat avatars. | Default: 32px */
  --glow-intensity: 1.5; /* Intensity of the glow used around the app. | Set to 0 to disable the glow. | Decimals allowed | Default: 1 */
  --opacity: 0.85; /* Opacity of overall app. | Default: .85 */
  --font: "Noto Serif"; /* Custom font | Default: 'Inter' */
  --avatar-roundness: 50%; /* Roundness for avatars. | 0% = Square, 50% = Circle | Default: 50% */
  --server-roundness: 50%; /* Roundness for servers. | 0% = Square, 50% = Circle | Default: 50% */
  /*
   * RadialStatus veriables
   */
  --rs-small-spacing: 2px; /* Spacing between profile image and outer ring on small icons (e.g. member list) | Default: 2px */
  --rs-medium-spacing: 4px; /* Spacing between profile image and outer ring on medium icons (e.g. user popout) | Default: 4px */
  --rs-large-spacing: 4px; /* Spacing between profile image and outer ring on medium icons (e.g. user popout fullscreen) | Default: 4px */
  --rs-small-width: 1.5px; /* Ring width (follows same sizing as above) | Default: 1.5px */
  --rs-medium-width: 2px; /* Default: 2px */
  --rs-large-width: 2px; /* Default: 2px */
  /* Customizable colors */
  --rs-online-color: #43b581; /* Default: #43b581 */
  --rs-idle-color: #faa61a; /* Default: #faa61a */
  --rs-dnd-color: #f04747; /* Default: #f04747 */
  --rs-offline-color: #636b75; /* Default: #636b75 */
  --rs-streaming-color: #643da7; /* Default: #643da7 */
  --rs-invisible-color: #747f8d; /* Default: #747f8d */
  --rs-phone-color: var(
    --rs-online-color
  ); /* Color of the phone for mobile users | Default: var(--rs-online-color) */
  --rs-phone-visible: block; /* Visibility of the phone for mobile users | Default: block */

  --interactive-normal: #e0e0e0;
}

/* fix background */
.bg_d4b6c5 {
  background-image: none;
  background: radial-gradient(
    circle,
    rgba(16, 16, 16, 1) 0%,
    rgba(16, 16, 16, 1) 25%,
    rgba(16, 16, 16, 1) 75%,
    rgba(224, 224, 224, 1) 100%
  );
}

/* smallen window button area */
.platform-osx .wrapper_fea3ef {
  margin-top: 20px;
}

/* properly round out the server items */
#app-mount .listItem_c96c45 [class*="pill"] {
  left: 50%;
  top: unset;
  transform: translateX(-53%);
  /*transform: translate(-2.25vh, -0.1vh);*/
  width: calc(var(--server-size, 48px));
  height: calc(var(--server-size, 48px));
  overflow: visible;
  margin-left: unset;
}

/* fix default background for users */
#app-mount .userPopoutOuter_c69a7b {
  background: #101010;
}

/* undo gap to status */
.biteSizeInnerThemed_c69a7b {
  gap: unset;
}

/* force scrollbar visibility */
.chatContent_a7d72e [class*="scrollerBase_"]::-webkit-scrollbar {
  display: initial;
}

/* fix displacement of status */
.custom-profile-theme .visibleContainer_d0a252.biteSize_d0a252 {
  top: calc(
    -15px + var(--custom-user-banner-height-bite-size) + var(--custom-user-profile-themed-container-user-profile-themed-padding)
  ) !important;
}

/* remove activity */
h3.membersGroup_cbd271.container_a5ad5c:has(.headerContainer_bc6acb),
div.members_cbd271 > div > div:has(.container_c64476.openOnHover_c64476) {
  display: none;
}

/* discover icon */
.footer_aa1bff {
  width: var(--guilds-width);
  background: transparent;
  padding-bottom: 0px;
  max-height: 45px;
}

#app-mount
  > div.appAsidePanelWrapper_bd26cc
  > div.notAppAsidePanel_bd26cc
  > div.app_bd26cc
  > div
  > div.layers_d4b6c5.layers_a01fb1
  > div
  > div
  > nav
  > ul
  > div.footer_aa1bff
  > div.listItem_c96c45
  > div.listItemWrapper_dfb2f8
  > div,
#app-mount
  > div.appAsidePanelWrapper_bd26cc
  > div.notAppAsidePanel_bd26cc
  > div.app_bd26cc
  > div
  > div.layers_d4b6c5.layers_a01fb1
  > div
  > div
  > nav
  > ul
  > div.footer_aa1bff
  > div.listItem_c96c45
  > div.listItemWrapper_dfb2f8
  > div
  > svg {
  width: 35px;
  height: 35px;
}

div.members_cbd271 > div > div:has(.container_c64476.openOnHover_c64476) {
  display: none;
}

/* unifying role button colors */
.vc-permviewer-role-button, .userPopoutOuter_c69a7b .roleRemoveButton_f9575e, .pill_e6f2d0, .button_edead5 {
  color: var(--interactive-normal);
  border-radius: var(--radius-xs);
  background: var(--bg-mod-faint);
  border: 1px solid var(--profile-body-border-color);
}
.vc-permviewer-role-button, .userPopoutOuter_c69a7b .roleRemoveButton_f9575e, .button_edead5 {
  padding: 4px;
  height: 24px;
}

/* sane positioning for remove role icon */
.roleRemoveIcon_f9575e {
  display: none;
  width: 8px;
  height: 8px;
  position: absolute;
  top: 50%;
  left: 5px;
  margin: -7px 0 0 -3px;
}

/* force remove role icon to be white in all cases */
// #popout_159 > div > div > div > div > div.body_b8cc6d.thin_c49869.scrollerBase_c49869.fade_c49869 > div.root_e6f2d0 > div:nth-child(2) > div:nth-child(1) > div > svg > path
#popout_159 > div > div > div > div > div.body_b8cc6d.thin_c49869.scrollerBase_c49869.fade_c49869 > div.root_e6f2d0 > div > div > div > svg > path {
  fill: var(--white-500);
}

/* allow for role button colors */
#app-mount .userPopoutOuter_c69a7b .roleCircle_a26d7b {
  z-index: 0;
}
.roleIcon_f9575e {
  position: relative;
}

/* fix background for gif/sticker buttons on hover */
#app-mount .form_a7d72e .button_dd4f85:not(.attachButton_f298d4).active_f9af59 svg {
  background: none !important;
}