1319 lines
30 KiB
CSS
1319 lines
30 KiB
CSS
:root {
|
|
--custom-member-list-width: 230px;
|
|
--show-memberlist-rpc: none;
|
|
--userbanner-blur: 0px;
|
|
}
|
|
|
|
html:not(.visual-refresh).show-redesigned-icons body::before {
|
|
position: fixed;
|
|
content: "YOU ARE NOT ON VISUAL-REFRESH! Enable visual-refresh by getting the experiments plugin, scrolling to experiments and searching for 2024-05_desktop_visual_refresh, clicking on the result and setting the Bucket Override to Treatment 2. Next time, try reading the README!";
|
|
z-index: 99999;
|
|
color: #ffffff;
|
|
top: 8px;
|
|
left: 8px;
|
|
background-color: var(--status-danger);
|
|
padding: 40px;
|
|
max-width: calc(100vw - 55px);
|
|
user-select: text;
|
|
font-weight: 900;
|
|
font-size: 32px;
|
|
line-height: 30pt;
|
|
/* politely ask people to use visual-refresh */
|
|
}
|
|
|
|
.theme-darker:not(.custom-theme-background) {
|
|
--bg-base-tertiary: #171717;
|
|
--background-base-lowest: var(--bg-base-tertiary) !important;
|
|
--background-base-lower: #272727 !important;
|
|
--background-surface-higher: #2c2c2c !important;
|
|
--background-floating: var(--background-surface-higher) !important;
|
|
--bg-surface-overlay: var(--background-surface-higher) !important;
|
|
--bg-surface-raised: var(--background-surface-higher) !important;
|
|
--chat-background-default: var(--background-base-lower) !important;
|
|
--background-primary: var(--background-base-lower);
|
|
--background-secondary: var(--bg-base-tertiary);
|
|
--background-tertiary: var(--bg-base-tertiary);
|
|
--background-secondary-alt: var(--background-surface-higher);
|
|
--modal-background: var(--background-floating);
|
|
--modal-footer-background: var(--background-floating);
|
|
--background-base-low: var(--background-base-lower);
|
|
/* make darker OGG DDEX4 colors, who needs another import */
|
|
}
|
|
|
|
:root {
|
|
/*background support!!!!!*/
|
|
/* --bg-base-tertiary: url(https://1-background.com/images/stars-1/stars-background-purple.jpg) !important; */
|
|
--fuck-do_not_use_empty_rulesets: yesplease;
|
|
}
|
|
|
|
.memberInner__5d473 {
|
|
min-height: 44px;
|
|
/* resize members in list to prevent --show-memberlist-rpc fucking upping */
|
|
}
|
|
|
|
.members_c8ffbb {
|
|
left: -4px;
|
|
}
|
|
|
|
.subText__91a9d {
|
|
display: var(--show-memberlist-rpc);
|
|
/* how --show-memberlist-rpc actually works */
|
|
}
|
|
|
|
.page_c48ade {
|
|
overflow: visible !important;
|
|
box-sizing: content-box;
|
|
height: calc(100vh - var(--custom-app-top-bar-height)) !important;
|
|
}
|
|
|
|
.content_f75fb0>.chatContent_f75fb0,
|
|
.container_f369db,
|
|
.callContainer_cb9592,
|
|
.contentRegion__23e6b {
|
|
margin: 0 8px 24px 8px;
|
|
border-radius: 0 0 16px 16px;
|
|
box-shadow: 8px 8px 32px rgba(0, 0, 0, 0.25);
|
|
overflow: hidden;
|
|
z-index: 100;
|
|
/* windowizes chat */
|
|
}
|
|
|
|
.callContainer_cb9592 {
|
|
border-radius: 16px !important;
|
|
}
|
|
|
|
.chat_f75fb0:has(.callContainer_cb9592) .container__01ae2 {
|
|
margin-top: 0px;
|
|
}
|
|
|
|
.content_f75fb0 .outer_c0bea0 {
|
|
margin: 0 8px 0 0;
|
|
height: calc(100% - 24px);
|
|
border-radius: 0 0 16px 16px;
|
|
}
|
|
|
|
.form_f75fb0::before {
|
|
display: none;
|
|
}
|
|
|
|
.visual-refresh .markup__75297 code {
|
|
background: rgba(0, 0, 0, 0.5);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.base_c48ade:has(.headerButton_f37cb1[aria-label="Blade0's Theme Server, server actions"]) {
|
|
background-image: linear-gradient(to bottom, transparent 0%, var(--bg-base-tertiary) 75%), url(https://blade04208.github.io/ddex4/src/serverwall.jpg) !important;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
--background-base-lower: rgba(255, 255, 255, 0.1);
|
|
|
|
.channelTextArea_f75fb0 {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.chatContent_f75fb0,
|
|
.subtitleContainer_f75fb0 {
|
|
backdrop-filter: blur(20px);
|
|
}
|
|
|
|
.title_f75fb0,
|
|
.subtitleContainer_f75fb0 {
|
|
border: none;
|
|
border-radius: 16px 16px 0px 0px;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
.container__01ae2 {
|
|
margin: 8px 8px 24px 0;
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
|
|
&.floating__01ae2 {
|
|
margin: 16px 16px 32px 0;
|
|
z-index: 101;
|
|
}
|
|
}
|
|
|
|
.subtitleContainer_f75fb0 {
|
|
margin: 8px 0 0 8px;
|
|
width: calc(100% - var(--custom-member-list-width) - 16px);
|
|
/* adjust size of title to align with chat content */
|
|
z-index: 101;
|
|
}
|
|
|
|
.chat_f75fb0:not(:has(.membersWrap_c8ffbb)) .subtitleContainer_f75fb0 {
|
|
/* closer selector to do less lag */
|
|
width: calc(100% - 16px);
|
|
/* reseize it for no memberlist */
|
|
}
|
|
|
|
|
|
|
|
.sidebar_c48ade[data-collapsed="false"] .sidebarResizeHandle_c48ade {
|
|
z-index: 2000;
|
|
left: calc(var(--custom-guild-sidebar-width) + 4px);
|
|
}
|
|
|
|
|
|
.content_c48ade:has([data-collapsed="true"]) .chatContent_f75fb0,
|
|
.content_c48ade:has([data-collapsed="true"]) .subtitleContainer_f75fb0 {
|
|
margin-left: 0px;
|
|
/* bring chat closer to servers */
|
|
}
|
|
|
|
.content_c48ade:has([data-collapsed="true"]) .subtitleContainer_f75fb0 {
|
|
width: calc(100% - 238px);
|
|
/* resize subtitle to accomadate collapsed serverlist */
|
|
}
|
|
|
|
.content_c48ade:not(:has([data-collapsed="false"], .membersWrap_c8ffbb)) .subtitleContainer_f75fb0 {
|
|
width: calc(100% - 8px);
|
|
/* resize subtitle to accomadate collapsed serverlist */
|
|
}
|
|
|
|
.title_f75fb0 {
|
|
border-radius: 16px 16px 0 0;
|
|
/* make title actually be rounded becuase it uhh fuck askjz\dagfweqdiohfyivhwebqwdhi */
|
|
}
|
|
|
|
.upperContainer__9293f {
|
|
overflow: hidden;
|
|
justify-content: end;
|
|
}
|
|
|
|
.container_c8ffbb,
|
|
.container__7641b {
|
|
margin-top: -56px;
|
|
height: calc(100% + 56px) !important;
|
|
max-height: 500%;
|
|
/* make memberlist use the now-vacant space :3 */
|
|
}
|
|
|
|
/* the great fuckwads*/
|
|
.container_c8ffbb,
|
|
.members_c8ffbb,
|
|
.member_c8ffbb,
|
|
.container__7641b,
|
|
.chat_f75fb0,
|
|
.guilds_c48ade,
|
|
.quickswitcher_ac6cb0,
|
|
.quickswitcher_ac6cb0 .scroller_ac6cb0,
|
|
.container__2637a,
|
|
.container_f37cb1,
|
|
.scroller__99e7c,
|
|
.privateChannels__35e86,
|
|
.itemsContainer_ef3116,
|
|
.sectionDivider__629e4,
|
|
.resizeHandle__01ae2,
|
|
.wrapper_cb9592,
|
|
.root_bfe55a,
|
|
.container__551b0 {
|
|
background: transparent !important;
|
|
/* hmmm i wonder what this does */
|
|
}
|
|
|
|
.chat_f75fb0,
|
|
.sidebarList_c48ade,
|
|
.container_c8ffbb,
|
|
.container__7641b,
|
|
[data-list-item-id^="channels___boosts-"] {
|
|
border: none !important;
|
|
}
|
|
|
|
.sidebar_c48ade,
|
|
.content__99f8c,
|
|
.container__2637a,
|
|
.sidebarList_c48ade,
|
|
.biteSize_c0bea0 .body__5be3e,
|
|
.chat_f75fb0,
|
|
[id^="folder-items-"] {
|
|
overflow: visible !important;
|
|
}
|
|
|
|
.panels_c48ade {
|
|
left: 0px !important;
|
|
bottom: 0px !important;
|
|
border-radius: 0px !important;
|
|
width: calc(100% + 8px) !important;
|
|
background: var(--bg-overlay-5) !important;
|
|
border: none !important;
|
|
border-top: 1px solid var(--border-subtle) !important;
|
|
|
|
/* make user panel closer to visual refresh */
|
|
[mask="url(#svg-mask-avatar-status-round-40)"],
|
|
.avatar__37e49 {
|
|
mask: none;
|
|
border-radius: 50%;
|
|
width: 32px !important;
|
|
height: 32px !important;
|
|
overflow: clip;
|
|
|
|
foreignObject {
|
|
mask: none !important;
|
|
}
|
|
|
|
.avatarStack__44b0c .avatar__44b0c {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
|
|
.avatarSpeaking__44b0c {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
|
|
[mask*="url(#svg-mask-status-"],
|
|
svg[viewBox="0 0 30 18"] {
|
|
display: none;
|
|
}
|
|
|
|
/* make the pfp smaller and removes status dot */
|
|
}
|
|
}
|
|
|
|
.wrapper_cb9592 .root_bfe55a {
|
|
background: #000000 !important;
|
|
}
|
|
|
|
.container__37e49 {
|
|
padding: 16px 16px 16px 20px !important;
|
|
/* makes the panel bigger */
|
|
}
|
|
|
|
.container_e131a9 {
|
|
padding: 16px 16px 16px 20px !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.avatarWrapper__37e49 {
|
|
gap: 12px !important;
|
|
/* increases the gap between panel pfp and name */
|
|
}
|
|
|
|
.nameTag__37e49 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
/* increaes the gap between panel username and status */
|
|
}
|
|
|
|
.guilds_c48ade {
|
|
top: -36px;
|
|
height: calc(100% - 36px);
|
|
border-right: 1px solid var(--border-subtle);
|
|
|
|
.stack_dbd263 {
|
|
padding-top: 36px;
|
|
}
|
|
|
|
z-index: 1;
|
|
/* makes guild list not a sack of shit and utilize the whole window to scroll */
|
|
}
|
|
|
|
.sidebar_c48ade:has(.voiceButtonsContainer_e131a9) .guilds_c48ade {
|
|
height: calc(100% - 151px);
|
|
}
|
|
|
|
a.link__2ea32,
|
|
.typeThread__2ea32 .link__2ea32,
|
|
.navItem__551b0 {
|
|
padding: 8px 8px;
|
|
border-radius: 12px 0 0 12px;
|
|
/* biggerize channels */
|
|
}
|
|
|
|
.spine__5b40b {
|
|
height: 24px;
|
|
}
|
|
|
|
.modeSelected__2ea32 a.link__2ea32,
|
|
.modeSelected__2ea32.typeThread__2ea32 .link__2ea32,
|
|
.navItem__551b0.selected__551b0 {
|
|
background-color: var(--brand-500);
|
|
|
|
&:hover {
|
|
background-color: var(--brand-600);
|
|
}
|
|
|
|
/* blurple channels */
|
|
}
|
|
|
|
.scroller__629e4::-webkit-scrollbar {
|
|
width: 0;
|
|
height: 0;
|
|
/* scrollbar from channel list is removed becuase it clips into channel list
|
|
couldnt find a fix for this, pr if you can */
|
|
}
|
|
|
|
[class*="scroll"] {
|
|
will-change: scroll-position;
|
|
/* offload scrolling to the gpu because fuck react */
|
|
}
|
|
|
|
.scroller__629e4,
|
|
.nav__551b0 {
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
width: calc(100% + 8px);
|
|
border-right: 1px solid var(--border-faint);
|
|
|
|
&:not(.nav__551b0) {
|
|
mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 97.5%, rgba(0, 0, 0, 0) 100%);
|
|
}
|
|
|
|
&[data-list-id^="private-channels-uid_"] {
|
|
margin-bottom: calc(var(--custom-app-panels-height)) !important;
|
|
}
|
|
|
|
/* makes channel list connect to chat */
|
|
}
|
|
|
|
.nav__551b0 {
|
|
padding: 8px !important;
|
|
gap: 8px;
|
|
}
|
|
|
|
.scroller__99e7c {
|
|
margin-bottom: var(--custom-app-panels-height) !important;
|
|
}
|
|
|
|
/*cards and member list and more not commented bc i didnt make this */
|
|
div[aria-label="Members"] div:not(.imageContainer_ef9ae7)>.contentImage__42bf5 {
|
|
left: 0px;
|
|
position: absolute;
|
|
z-index: -1;
|
|
max-width: unset !important;
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
filter: saturate(80%);
|
|
}
|
|
|
|
.container__0f2e8 {
|
|
/* gradient */
|
|
z-index: 0;
|
|
overflow: hidden;
|
|
background-color: black !important;
|
|
margin-left: 0px;
|
|
padding-left: 16px;
|
|
height: 120px;
|
|
border-radius: 0px 12px 12px 0px;
|
|
border: none !important;
|
|
|
|
&::after {
|
|
z-index: -1;
|
|
content: "";
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 100%;
|
|
top: 0;
|
|
right: 0px;
|
|
left: 0px;
|
|
background: linear-gradient(rgba(0, 0, 0, 0), var(--brand-700)), linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, .7));
|
|
background-blend-mode: screen, difference, ligthen;
|
|
border-radius: 0px 0px 0 0;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.infoSection__0f2e8 {
|
|
height: 100%;
|
|
justify-content: end;
|
|
z-index: 0;
|
|
|
|
.contentTitle__0f2e8::before {
|
|
opacity: 0.75;
|
|
content: "played ";
|
|
font-size: 12px;
|
|
}
|
|
|
|
* {
|
|
text-shadow: 0px 0px 10px rgb(0, 0, 0);
|
|
overflow: visible !important;
|
|
z-index: 1;
|
|
}
|
|
|
|
svg>path {
|
|
box-shadow: 0px 0px 10px rgb(0, 0, 0);
|
|
}
|
|
}
|
|
|
|
/* username */
|
|
.userName__0f2e8 {
|
|
position: relative;
|
|
left: 12px;
|
|
top: 5px;
|
|
}
|
|
|
|
/* below username text */
|
|
.contentTitle__0f2e8 {
|
|
position: relative;
|
|
font-size: 13px;
|
|
width: 150px;
|
|
white-space: wrap;
|
|
bottom: 3px;
|
|
left: 50px;
|
|
}
|
|
|
|
.facePile__0f2e8,
|
|
.facePileItem__0f2e8,
|
|
.facePileItem__0f2e8 div,
|
|
.facePileItem__0f2e8 svg,
|
|
.facePileItem__0f2e8 foreignObject {
|
|
top: 3px;
|
|
width: 23px !important;
|
|
height: 23px !important;
|
|
contain: none;
|
|
align-self: center;
|
|
}
|
|
|
|
.userSection__0f2e8 {
|
|
gap: 8px;
|
|
}
|
|
|
|
.badgesContainer__635ed {
|
|
position: absolute;
|
|
bottom: calc(100% - 16px - 16px);
|
|
width: calc(100% - 16px - 8px);
|
|
justify-content: flex-end;
|
|
|
|
.badgeContainer__635ed {
|
|
backdrop-filter: saturate(3) blur(20px);
|
|
background-color: rgba(0, 0, 0, 0.25);
|
|
border-radius: 8px;
|
|
padding: 4px;
|
|
|
|
svg path,
|
|
[data-text-variant="text-xs/normal"] {
|
|
text-shadow: none !important;
|
|
color: #ffffff !important;
|
|
fill: #ffffff !important;
|
|
}
|
|
}
|
|
|
|
.badgeContainer__635ed:has([style*="color: var(--text-positive);"]) {
|
|
background-color: var(--text-positive) !important;
|
|
|
|
.tabularNumbers__4bd52 {
|
|
color: #ffffff !important;
|
|
text-shadow: none !important;
|
|
}
|
|
|
|
svg path {
|
|
text-shadow: none !important;
|
|
color: #ffffff !important;
|
|
fill: #ffffff !important;
|
|
}
|
|
}
|
|
|
|
.badgeContainer__635ed:has(path[fill="var(--status-positive)"]),
|
|
.badgeContainer__635ed:has(path[d^="M4 12a8 8 0 0 1 14.93-4H15a1"]) {
|
|
height: 16px !important;
|
|
width: 16px;
|
|
justify-content: center;
|
|
|
|
.badgeLabel__635ed {
|
|
display: none;
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.search__97492:not(.open__97492) {
|
|
&>.searchBar__97492 {
|
|
width: 24px;
|
|
background: transparent;
|
|
border: none;
|
|
}
|
|
|
|
& .icon__97492 {
|
|
cursor: pointer;
|
|
|
|
&>.iconContainer_fea832 {
|
|
transform: scale(1.25) translate(-4px, 1.5px);
|
|
|
|
&>svg.icon_fea832 {
|
|
color: var(--interactive-normal);
|
|
}
|
|
|
|
&:hover>svg.icon_fea832 {
|
|
color: var(--interactive-active);
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover::before {
|
|
position: absolute;
|
|
border-radius: 5px;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
line-height: 16px;
|
|
box-sizing: border-box;
|
|
word-wrap: break-word;
|
|
z-index: 1002;
|
|
top: calc(100% + 8px);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
color: var(--text-normal);
|
|
padding: 8px 12px;
|
|
background-color: var(--background-floating);
|
|
content: 'Search';
|
|
box-shadow: var(--elevation-high);
|
|
border: 1px solid var(--border-subtle);
|
|
}
|
|
|
|
&:hover::after {
|
|
width: 0;
|
|
height: 0;
|
|
border: 0 solid transparent;
|
|
border-width: 5px;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: calc(100% - 1.7px);
|
|
content: '';
|
|
border-top-color: var(--background-floating);
|
|
bottom: 100%;
|
|
left: 50%;
|
|
margin-left: -5px;
|
|
border-top-width: 5px;
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
/* iconifies search, made by obsidian */
|
|
}
|
|
|
|
li:has(.containerDefault_c69b6d .focusTarget__89030) {
|
|
width: 40px;
|
|
height: 0px;
|
|
|
|
/*fucky but discord decided not to give these styles so!*/
|
|
&:has(path[d^="M14.5 8a3 3 0 1 0-2.7-4.3c-.2.4.06.86.44 1.12a5 5 0 0 1 2."]) {
|
|
margin-left: 104px;
|
|
|
|
}
|
|
|
|
&:has(path[d^="M2 10a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v9a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3v-9Zm3.5"]) {
|
|
margin-left: 52px;
|
|
}
|
|
|
|
&:has(path[d^="M11 3a1 1 0 1 1 2 0v2h5.75c.16 0 .3.07.4.2l2.63 3.5a.5.5 0 0 1 0 .6l"]) {
|
|
margin-left: 52px;
|
|
|
|
}
|
|
|
|
/* turns server action tabs to funny buttons, per-button styling */
|
|
}
|
|
|
|
.content__99f8c .sectionDivider__629e4 {
|
|
margin-top: 36px;
|
|
/* adds margin to adjust for funny server action tabs */
|
|
}
|
|
|
|
.content__99f8c:has([data-list-item-id^="channels___boosts-"]) .sectionDivider__629e4 {
|
|
margin-top: calc(36px + 48px);
|
|
}
|
|
|
|
li:has([data-list-item-id^="channels___boosts-"]) {
|
|
overflow: visible;
|
|
height: 0px !important;
|
|
|
|
[data-list-item-id^="channels___boosts-"] {
|
|
padding-top: 48px;
|
|
pointer-events: none;
|
|
|
|
.textArea_eff079 {
|
|
pointer-events: all;
|
|
}
|
|
|
|
.progressBarContainer_eff079 {
|
|
pointer-events: all;
|
|
margin-top: 0;
|
|
padding-top: var(--space-8);
|
|
background-color: transparent !important;
|
|
}
|
|
}
|
|
|
|
/* TODO: MAKE SERVER ACTION TABS GO ABOVE BOOSTS [@3] */
|
|
}
|
|
|
|
div[style="height: 12px;"] {
|
|
height: 4px !important;
|
|
}
|
|
|
|
[data-list-item-id^="channels___boosts-"] {
|
|
padding-right: 16px;
|
|
margin-bottom: 16px;
|
|
pointer-events: all;
|
|
/* makes boosts not be fucked up style-wise by cut off channels */
|
|
}
|
|
|
|
.animatedBannerHoverLayer_f37cb1 {
|
|
display: none;
|
|
/* remove as it no longer serves a perpose */
|
|
}
|
|
|
|
.containerDefault_c69b6d:not([data-dnd-name]):has(.focusTarget__89030) {
|
|
width: 40px;
|
|
height: 40px;
|
|
|
|
.link__2ea32 {
|
|
justify-content: center;
|
|
border-radius: 100%;
|
|
width: 40px;
|
|
height: 40px;
|
|
transition: background-color 0.1s;
|
|
|
|
&:hover {
|
|
background-color: rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
.newChannel__599fa {
|
|
font-size: 0px;
|
|
position: absolute;
|
|
min-width: 0px;
|
|
min-height: 0px;
|
|
height: 12px;
|
|
left: 28px;
|
|
bottom: 28px;
|
|
}
|
|
}
|
|
|
|
.name__2ea32 {
|
|
display: none;
|
|
}
|
|
|
|
/* turns server action tabs to funny buttons */
|
|
}
|
|
|
|
.animatedContainer_f37cb1 {
|
|
position: absolute;
|
|
width: 100vw;
|
|
height: 100vh !important;
|
|
opacity: 1 !important;
|
|
transform: translateX(-76px) translateY(-95px) !important;
|
|
background-color: transparent !important;
|
|
border-bottom: none !important;
|
|
box-shadow: none;
|
|
/* filter: blur(10px); */
|
|
margin-left: 5px;
|
|
pointer-events: none;
|
|
/* makes banner big and in the bg */
|
|
}
|
|
|
|
.sidebarList_c48ade .content__99f8c > div[style="height: 130px;"] {
|
|
display: none;
|
|
/* behold, the epilepsynator
|
|
changing this element in any way will kill the channel list
|
|
do not touch it, it is very sensitive
|
|
thank you
|
|
*/
|
|
}
|
|
|
|
.bannerImage_f37cb1 {
|
|
transform: translateY(0px) scale(1) !important;
|
|
pointer-events: none;
|
|
/* stop banner from moving with scroll and being clickable, we have channel name for that */
|
|
}
|
|
|
|
.bannerImg_f37cb1 {
|
|
width: 100vw !important;
|
|
height: 400px !important;
|
|
mask-image: linear-gradient(to top, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
|
|
/* resizes one last time and adds our mask */
|
|
}
|
|
|
|
.visual-refresh .sidebarList_c48ade .header_f37cb1 {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
border: none !important;
|
|
height: auto;
|
|
z-index: 200;
|
|
border-radius: 16px;
|
|
margin-left: 8px;
|
|
background: rgba(0, 0, 0, 0);
|
|
|
|
[class^="headerContent_"] {
|
|
height: auto;
|
|
|
|
.guildIconV2Container__85d16 {
|
|
display: none;
|
|
}
|
|
|
|
[class*="name_"] {
|
|
font-size: 32px !important;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
white-space: initial;
|
|
text-wrap: balance;
|
|
}
|
|
}
|
|
|
|
/* biggifies and transparents header */
|
|
}
|
|
|
|
.bar_c38106 {
|
|
z-index: 1;
|
|
/* makes top bar be above banner */
|
|
}
|
|
|
|
.listItem__650eb:not(:has(.lowerBadge_cc5dd2)) .pill_e5445c:not(:has([style="opacity: 1; height: 40px; transform: none;"])) {
|
|
width: 100%;
|
|
justify-content: flex-end;
|
|
z-index: 3;
|
|
overflow: visible;
|
|
pointer-events: none;
|
|
|
|
span {
|
|
border-radius: 100%;
|
|
width: 8px;
|
|
height: 8px !important;
|
|
margin-right: 14.6px;
|
|
margin-top: 28px;
|
|
border: 5px solid var(--bg-base-tertiary);
|
|
transition: none !important;
|
|
}
|
|
|
|
/* add general dot-to-pill */
|
|
}
|
|
|
|
.listItem__650eb:has(.lowerBadge_cc5dd2) .pill_e5445c:not(:has([style="opacity: 1; height: 40px; transform: none;"])) {
|
|
width: 100%;
|
|
justify-content: flex-end;
|
|
z-index: 3;
|
|
overflow: visible;
|
|
pointer-events: none;
|
|
transition: none !important;
|
|
|
|
span {
|
|
border-radius: 100%;
|
|
width: 8px;
|
|
height: 8px !important;
|
|
margin-right: 14.6px;
|
|
margin-top: 28px;
|
|
border: 5px solid var(--bg-base-tertiary);
|
|
transition: none !important;
|
|
}
|
|
|
|
/* i think this does the exact same thing lmfao */
|
|
}
|
|
|
|
.listItem__650eb:not(:has([style="opacity: 1; height: 40px; transform: none;"])) {
|
|
overflow: visible;
|
|
/* let open server overflow */
|
|
}
|
|
|
|
.listItem__650eb:has([class^="folderIcon_"]) .pill_e5445c:not(:has([style="opacity: 1; height: 40px; transform: none;"])) span {
|
|
margin-right: 11px;
|
|
margin-top: 36px;
|
|
/* adjustment for folders */
|
|
}
|
|
|
|
.listItem__650eb:has(.lowerBadge_cc5dd2) .pill_e5445c:not(:has([style="opacity: 1; height: 40px; transform: none;"])) span {
|
|
display: none;
|
|
/* remove for pings */
|
|
}
|
|
|
|
.listItem__650eb:hover .pill_e5445c:not(:has([style="opacity: 1; height: 40px; transform: none;"])),
|
|
.listItem__650eb:has(.lowerBadge_cc5dd2):hover .pill_e5445c:not(:has([style="opacity: 1; height: 40px; transform: none;"])) {
|
|
span {
|
|
display: block !important;
|
|
color: rgba(0, 0, 0, 0) !important;
|
|
background-color: rgba(0, 0, 0, 0) !important;
|
|
width: 47px !important;
|
|
height: 48px !important;
|
|
border-radius: 15.5px;
|
|
margin-right: 11px;
|
|
margin-top: 0px;
|
|
transform: none !important;
|
|
border: 2px solid rgba(255, 255, 255, 0.7);
|
|
}
|
|
|
|
/* add more general dot-to-pill */
|
|
}
|
|
|
|
.pill_e5445c {
|
|
width: 100%;
|
|
overflow: visible !important;
|
|
opacity: 1;
|
|
/* pill rules */
|
|
}
|
|
|
|
.pill_e5445c [style="opacity: 1; height: 40px; transform: none;"] {
|
|
right: 0;
|
|
height: 53px !important;
|
|
background-color: var(--background-accent);
|
|
width: 64px;
|
|
border-radius: 30% 0 0 30%;
|
|
filter: drop-shadow(0px 14px 8px rgba(0, 0, 0, 0.1));
|
|
pointer-events: none;
|
|
animation: pillAnimateIn 0.3s backwards cubic-bezier(0, 0, 0, 1.4);
|
|
/* open server thinger */
|
|
}
|
|
|
|
.pill_e5445c [style="opacity: 1; height: 40px; transform: none;"]::after,
|
|
.pill_e5445c [style="opacity: 1; height: 40px; transform: none;"]::before {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 100%;
|
|
right: 0;
|
|
width: 30px;
|
|
height: 30px;
|
|
border-bottom-right-radius: 20px;
|
|
box-shadow: 15px 15px 0 15px var(--background-accent);
|
|
/* open server thinger rounding */
|
|
}
|
|
|
|
.pill_e5445c [style="opacity: 1; height: 40px; transform: none;"]::before {
|
|
top: 100%;
|
|
border-bottom-right-radius: 0;
|
|
border-top-right-radius: 20px;
|
|
box-shadow: 15px -15px 0 15px var(--background-accent);
|
|
/* open server thinger */
|
|
}
|
|
|
|
@keyframes pillAnimateIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(10%);
|
|
}
|
|
|
|
/* open server animation */
|
|
}
|
|
|
|
.basicThemeSelectors_fbfab6 {
|
|
.themeSelectionContainer__36dee {
|
|
width: calc(50% - 12px);
|
|
height: 48px;
|
|
}
|
|
|
|
.themeSelection__36dee {
|
|
border-radius: 12px;
|
|
|
|
&:after {
|
|
position: relative;
|
|
font-weight: 400;
|
|
font-size: 16px;
|
|
color: #ffffff;
|
|
left: 16px;
|
|
top: 16.5px;
|
|
}
|
|
}
|
|
|
|
.lightIcon__36dee:after {
|
|
content: "Discord Light";
|
|
color: #000000;
|
|
}
|
|
|
|
.darkIcon__36dee:not(:has(.iconWrapper__36dee)):after {
|
|
content: "Discord Dark";
|
|
}
|
|
|
|
.darkerIcon__36dee:after {
|
|
content: "DDEX4 Colors";
|
|
}
|
|
|
|
.midnightIcon__36dee:after {
|
|
content: "Discord Midnight";
|
|
}
|
|
|
|
.selectionCircle__36dee {
|
|
border-radius: 15px;
|
|
|
|
.checkmarkCircle__36dee {
|
|
right: 12px;
|
|
top: 13.5px;
|
|
}
|
|
}
|
|
|
|
.themeSelectionContainer__36dee:has(.darkIcon__36dee .iconWrapper__36dee) {
|
|
width: 100%;
|
|
|
|
.darkIcon__36dee {
|
|
.iconWrapper__36dee {
|
|
margin-top: 13px;
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
|
|
&:after {
|
|
content: "Sync with Computer";
|
|
left: 48px;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* make theme switchers be little menu things */
|
|
}
|
|
|
|
.quickswitcher_ac6cb0 {
|
|
border: none !important;
|
|
--interactive-normal: rgba(255, 255, 255, 0.8);
|
|
--header-primary: #ffffff;
|
|
--text-normal: #ffffff;
|
|
|
|
.input_ac6cb0 {
|
|
background: rgba(0, 0, 0, 0.5);
|
|
font-size: 18px;
|
|
height: 52px;
|
|
}
|
|
|
|
.autocompleteQuerySymbol_ac6cb0 {
|
|
background-color: rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
/* makes quickswitcher fancy */
|
|
}
|
|
|
|
.layerContainer_da8173:has(.quickswitcher_ac6cb0) .backdrop__78332 {
|
|
background: rgba(0, 0, 0, 0.5) !important;
|
|
backdrop-filter: blur(16px) !important;
|
|
/* adds blur to quickswitcher */
|
|
}
|
|
|
|
|
|
|
|
.sidebarRegion__23e6b {
|
|
max-width: 300px;
|
|
|
|
&::after {
|
|
content: ' ';
|
|
background: linear-gradient(to bottom, var(--bg-base-tertiary) 20%, rgba(0, 0, 0, 0) 100%);
|
|
position: absolute;
|
|
width: 350px;
|
|
height: 100px;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.sidebarRegionScroller__23e6b {
|
|
justify-content: flex-start;
|
|
|
|
.sidebar__23e6b {
|
|
width: 300px;
|
|
padding: 60px 0 6px 20px;
|
|
|
|
.item_b3f026 {
|
|
padding: 10px 10px;
|
|
border-radius: 12px 0 0 12px;
|
|
|
|
&.selected_b3f026 {
|
|
background-color: var(--brand-500);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* makes sidebar big, adds channel styling */
|
|
.searchBar_c7e907 {
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.mask__68edb {
|
|
height: 100px;
|
|
contain: none;
|
|
overflow: visible;
|
|
|
|
[mask^="url(#uid_"] {
|
|
mask: none !important;
|
|
|
|
.banner__68edb {
|
|
width: 100vw;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* make account card be scale-adjustable */
|
|
|
|
.thin_d125d2::-webkit-scrollbar {
|
|
width: 0 !important;
|
|
height: 0 !important;
|
|
}
|
|
}
|
|
|
|
.contentColumn__23e6b {
|
|
min-width: 0px;
|
|
width: calc(100% - 300px) !important;
|
|
max-width: calc(100% - 300px) !important;
|
|
/* make content wide but dynamic */
|
|
}
|
|
|
|
.reaction__23977,
|
|
.codeContainer__75297,
|
|
.mosaicItem__6c706,
|
|
.videoControls_cf09d8,
|
|
.container_cacd02 {
|
|
direction: ltr !important;
|
|
text-align: left !important;
|
|
/* unfuck bubble code */
|
|
}
|
|
|
|
.vc-ranb-button {
|
|
margin: 0 16px;
|
|
width: calc(100% - 32px);
|
|
height: 40px !important;
|
|
min-height: 40px;
|
|
max-height: 40px !important;
|
|
padding: 2px;
|
|
background-color: var(--background-surface-higher);
|
|
background-color: rgb(var(--bg-overlay-opacity-6));
|
|
border: none;
|
|
border-radius: 12px;
|
|
|
|
.contents__201d5 {
|
|
font-size: 0px;
|
|
}
|
|
|
|
.contents__201d5::after {
|
|
content: "asdfg";
|
|
font-size: 18px;
|
|
width: 16px;
|
|
height: 16px;
|
|
position: relative;
|
|
color: transparent;
|
|
top: 2.5px;
|
|
left: 6px;
|
|
background-image: url("data:image/svg+xml,%3Csvg%20x%3D%220%22%20y%3D%220%22%20class%3D%22icon__9293f%22%20aria-hidden%3D%22true%22%20role%3D%22img%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23D8D8DB%22%20d%3D%22M9.7%202.89c.18-.07.32-.24.37-.43a2%202%200%200%201%203.86%200c.05.2.19.36.38.43A7%207%200%200%201%2019%209.5v2.09c0%20.12.05.24.13.33l1.1%201.22a3%203%200%200%201%20.77%202.01v.28c0%20.67-.34%201.29-.95%201.56-1.31.6-4%201.51-8.05%201.51-4.05%200-6.74-.91-8.05-1.5-.61-.28-.95-.9-.95-1.57v-.28a3%203%200%200%201%20.77-2l1.1-1.23a.5.5%200%200%200%20.13-.33V9.5a7%207%200%200%201%204.7-6.61ZM9.18%2019.84A.16.16%200%200%200%209%2020a3%203%200%201%200%206%200c0-.1-.09-.17-.18-.16a24.86%2024.86%200%200%201-5.64%200Z%22%20class%3D%22%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: var(--brand-500);
|
|
|
|
.contents__201d5::after {
|
|
background-image: url("data:image/svg+xml,%3Csvg%20x%3D%220%22%20y%3D%220%22%20class%3D%22icon__9293f%22%20aria-hidden%3D%22true%22%20role%3D%22img%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M9.7%202.89c.18-.07.32-.24.37-.43a2%202%200%200%201%203.86%200c.05.2.19.36.38.43A7%207%200%200%201%2019%209.5v2.09c0%20.12.05.24.13.33l1.1%201.22a3%203%200%200%201%20.77%202.01v.28c0%20.67-.34%201.29-.95%201.56-1.31.6-4%201.51-8.05%201.51-4.05%200-6.74-.91-8.05-1.5-.61-.28-.95-.9-.95-1.57v-.28a3%203%200%200%201%20.77-2l1.1-1.23a.5.5%200%200%200%20.13-.33V9.5a7%207%200%200%201%204.7-6.61ZM9.18%2019.84A.16.16%200%200%200%209%2020a3%203%200%201%200%206%200c0-.1-.09-.17-.18-.16a24.86%2024.86%200%200%201-5.64%200Z%22%20class%3D%22%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
|
|
}
|
|
}
|
|
|
|
/* turn vc read message button into a server-like */
|
|
}
|
|
|
|
.wrapper_d5f3cd {
|
|
border-radius: 12px !important;
|
|
direction: ltr;
|
|
text-align: start;
|
|
overflow: hidden;
|
|
|
|
.header_d5f3cd {
|
|
display: none;
|
|
}
|
|
|
|
.inviteSplash_d5f3cd {
|
|
z-index: 0;
|
|
transform-origin: top left;
|
|
left: -16px;
|
|
top: -16px;
|
|
bottom: 0;
|
|
position: relative;
|
|
height: 0;
|
|
margin: 0 !important;
|
|
overflow: visible !important;
|
|
|
|
img {
|
|
width: calc(100% + 32px);
|
|
height: 84px;
|
|
opacity: 1;
|
|
filter: brightness(0.4);
|
|
}
|
|
}
|
|
|
|
.content_d5f3cd {
|
|
z-index: 10;
|
|
text-shadow: #000000;
|
|
flex-wrap: nowrap;
|
|
gap: 0px;
|
|
}
|
|
|
|
.colorGreen__201d5 {
|
|
background: var(--brand-500);
|
|
border: none;
|
|
padding: 12px 24px;
|
|
border-radius: 12px;
|
|
|
|
&:hover {
|
|
background: var(--brand-400);
|
|
}
|
|
}
|
|
|
|
.channel_d5f3cd,
|
|
.statusCounts_d5f3cd {
|
|
display: none;
|
|
}
|
|
|
|
.headerLine_ae2544 {
|
|
width: 50%;
|
|
}
|
|
|
|
.inviteDestination_d5f3cd {
|
|
margin: 0;
|
|
font-size: large;
|
|
font-weight: 500;
|
|
text-shadow: 0px 0px 10px#00000080;
|
|
overflow: visible;
|
|
|
|
.infoTitle_ae2544 {
|
|
overflow: visible;
|
|
|
|
.guildNameWrapper_d5f3cd {
|
|
overflow: visible;
|
|
|
|
.guildName_d5f3cd {
|
|
overflow: visible;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.page_c48ade:has(.container__133bf, .applicationStore_f07d62, .shopViewWrapper__6db1d, .chat_f75fb0 .tabBar__0b563, .mainTableContainer__09a38, .background__7449f, .container_a592e1) {
|
|
margin: 0 8px 24px 8px;
|
|
border-radius: 16px !important;
|
|
width: calc(100% - 16px);
|
|
overflow: hidden !important;
|
|
box-shadow: 8px 8px 32px rgba(0, 0, 0, 0.25);
|
|
/* 24px is a magic number from the margin above */
|
|
height: calc(100vh - var(--custom-app-top-bar-height) - 24px) !important;
|
|
background: var(--background-base-lower);
|
|
}
|
|
|
|
.fullScreen_cb9592 .callContainer_cb9592 {
|
|
margin-top: 12px;
|
|
height: 100%;
|
|
}
|
|
|
|
.contentRegion__23e6b {
|
|
margin: 10px 10px 10px 0px;
|
|
border-radius: 16px;
|
|
}
|
|
|
|
/* borken */
|
|
/*.accountProfilePopoutWrapper__37e49 {
|
|
|
|
.mask__68edb,
|
|
.username_af7fb7,
|
|
.descriptionClamp_f5f93a,
|
|
.body_af7fb7 div[aria-hidden="true"] {
|
|
display: none;
|
|
}
|
|
|
|
.header__5be3e {
|
|
height: 0px !important;
|
|
|
|
[mask="url(#svg-mask-avatar-decoration-status-round-80)"],
|
|
[mask^="url(#svg-mask-status-"],
|
|
[mask="url(#svg-mask-avatar-status-round-80)"] {
|
|
mask: none !important;
|
|
fill: none;
|
|
border-radius: 200px;
|
|
|
|
}
|
|
.cursorDefault__44b0c {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.avatar__75742,
|
|
.wrapper__44b0c,
|
|
.svg__44b0c,
|
|
.avatarDecoration__44b0c {
|
|
top: 7px;
|
|
left: 7.5px;
|
|
width: 40px !important;
|
|
height: 40px !important;
|
|
}
|
|
|
|
.avatarDecoration__44b0c {
|
|
top: 5px !important;
|
|
scale: 1.2 !important;
|
|
}
|
|
|
|
.editable_ab8609 {
|
|
left: 74px !important;
|
|
top: 20px;
|
|
|
|
.outer_ab8609::before {
|
|
display: none;
|
|
}
|
|
|
|
.outer_ab8609::after {
|
|
display: none;
|
|
}
|
|
|
|
.outer_ab8609 {
|
|
border: none !important;
|
|
padding: 8px;
|
|
box-shadow: none;
|
|
background: var(--bg-mod-faint);
|
|
width: 210px;
|
|
max-width: none;
|
|
animation: none !important;
|
|
|
|
.inner_ab8609 {
|
|
height: 32px;
|
|
padding: 0px 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
background: transparent;
|
|
border-radius: 12px !important;
|
|
transition: height 0.5s;
|
|
animation: none !important;
|
|
|
|
.content_ab8609 {
|
|
-webkit-line-clamp: 100;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
background-color: color-mix(in srgb, var(--background-base-lower) 90%, #ffffff);
|
|
|
|
.inner_ab8609 {
|
|
height: unset !important;
|
|
animation: none !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.body_af7fb7 {
|
|
padding-top: 0px;
|
|
margin-top: 0px;
|
|
height: calc(238px + 48px + 12px);
|
|
justify-content: end;
|
|
}
|
|
} */
|
|
|
|
/* decoration fix */
|
|
/* profile in bottom left */
|
|
.avatarWrapper__37e49 .avatarDecoration__44b0c {
|
|
transform: translate(4px, 4px) !important;
|
|
scale: 1.2 !important;
|
|
}
|
|
|
|
/* avatar in chat */
|
|
.avatarDecoration_c19a55 {
|
|
transform: translate(0px, 1px) !important;
|
|
scale: 1 !important;
|
|
}
|
|
|
|
.mask__68edb>mask {
|
|
display: none;
|
|
}
|
|
|
|
.channelBottomBarArea_f75fb0 {
|
|
margin: 0 !important;
|
|
border-top: 1px solid var(--border-subtle);
|
|
|
|
.channelTextArea_f75fb0 {
|
|
border-radius: 0 !important;
|
|
border: none;
|
|
}
|
|
|
|
.accessoryBar__74017 {
|
|
margin: 0;
|
|
padding: 8px 16px;
|
|
border-top: 1px solid var(--border-faint);
|
|
}
|
|
|
|
/* makes message box stick to bottom */
|
|
}
|
|
|