201 lines
6.8 KiB
CSS
201 lines
6.8 KiB
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;
|
|
} |