2089 lines
73 KiB
CSS
2089 lines
73 KiB
CSS
/**
|
|
* @name m0on Midnight
|
|
* @description a heavily customized midnight theme based on my current profile
|
|
* @author refact0r and m0onmo0n
|
|
* @version 2.1.1
|
|
* @invite nz87hXyvcy
|
|
* @website https://github.com/refact0r/midnight-discord
|
|
* @source https://github.com/refact0r/midnight-discord/blob/master/themes/midnight.theme.css
|
|
* @authorId 508863359777505290
|
|
* @authorLink https://www.refact0r.dev
|
|
*/
|
|
|
|
|
|
/* main.css */
|
|
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
|
|
|
|
:root {
|
|
container-name: root;
|
|
--custom-guild-list-padding: 12px;
|
|
--panel-backdrop-filter: none;
|
|
|
|
--border-hover: var(--border-subtle);
|
|
}
|
|
|
|
body {
|
|
container-name: body;
|
|
|
|
/* font, change to '' for default discord font */
|
|
--font: 'figtree';
|
|
--code-font: '';
|
|
|
|
/* sizes */
|
|
--gap: 6px; /* spacing between panels */
|
|
--divider-thickness: 4px; /* thickness of unread messages divider and highlighted message borders */
|
|
--border-thickness: 1px; /* thickness of borders around main panels. DOES NOT AFFECT OTHER BORDERS */
|
|
--custom-guild-list-width: calc(var(--guildbar-avatar-size) + var(--custom-guild-list-padding) * 2 + var(--border-thickness) * 2);
|
|
|
|
--border-hover-transition: 0.2s ease;
|
|
}
|
|
|
|
.visual-refresh {
|
|
/* panel separation */
|
|
.guilds__5e434 /* server list */,
|
|
.sidebarList__5e434 /* channel list (includes dm list) */,
|
|
.panels__5e434 /* user panel */,
|
|
.chat_f75fb0 > .subtitleContainer_f75fb0 /* chat titlebar */,
|
|
.chatContent_f75fb0 /* chat */,
|
|
.container_c8ffbb /* member list */,
|
|
.content_f75fb0 > .membersWrap_c8ffbb /* forum post member list */,
|
|
.container__133bf > .container__9293f /* friends titlebar */,
|
|
.container_f391e3 > .container__9293f /* message requests titlebar */,
|
|
.homeWrapper__0920e > .container__9293f /* nitro page titlebar */,
|
|
.container__01ae2 > .container__9293f /* vc chat titlebar */,
|
|
.container_fb64c9 > .container__9293f /* new thread panel */,
|
|
.peopleColumn__133bf /* online friends */,
|
|
.nowPlayingColumn__133bf /* active now */,
|
|
.scroller_c880e8 /* nitro page */,
|
|
.container_f391e3 > .content_f75fb0 /* message requests */,
|
|
.shop__6db1d /* shop */,
|
|
.content_f75fb0 > aside > .outer_c0bea0 /* dm user panel */,
|
|
.searchResultsWrap_a9e706 /* search results */,
|
|
.container_f369db /* forum */,
|
|
.chat_fb64c9 /* new thread panel */,
|
|
.container_a592e1 /* server discovery */,
|
|
.callContainer_cb9592 /* vc container */,
|
|
.wrapper_cb9592.sidebarOpen_cb9592 .callContainer_cb9592 /* vc container when chat open */,
|
|
.callContainer__722ff /* stage */,
|
|
.chat_f75fb0 > .header_c791b2 /* server members header */,
|
|
.chat_f75fb0 > .scrollerBase_d125d2 /* server members page */,
|
|
.chat_f75fb0 > .header__0b563 /* server channels and roles header */,
|
|
.chat_f75fb0 > .container__0b563 /* server channels and roles page */ {
|
|
background-color: var(--background-base-lower);
|
|
border-radius: var(--radius-lg);
|
|
border: var(--border-thickness) solid var(--border-subtle);
|
|
backdrop-filter: var(--panel-backdrop-filter);
|
|
box-sizing: border-box;
|
|
transition: border-color var(--border-hover-transition);
|
|
|
|
&:hover {
|
|
border-color: var(--border-hover);
|
|
}
|
|
}
|
|
|
|
.panels__5e434 /* user panel */ {
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.sidebar__5e434 /* server list + channel list + user panel group */ {
|
|
margin: 0 var(--gap) var(--gap) var(--gap);
|
|
}
|
|
|
|
.guilds__5e434 /* server list */ {
|
|
margin-bottom: calc(var(--custom-app-panels-height, 0) + var(--gap));
|
|
margin-right: var(--gap);
|
|
}
|
|
.guilds__5e434 + div:not(.sidebarList__5e434) /* betterfolders */ {
|
|
width: 100% !important;
|
|
}
|
|
.scroller_ef3116 /* server list inner scroller */ {
|
|
padding: var(--custom-guild-list-padding) 0;
|
|
}
|
|
.folderGroup__48112 {
|
|
width: 100%;
|
|
}
|
|
.listItem__650eb {
|
|
width: 100%;
|
|
}
|
|
|
|
.sidebarList__5e434 /* channel list */ {
|
|
margin-bottom: calc(var(--custom-app-panels-height, 0) + var(--gap));
|
|
}
|
|
.container__2637a /* channel list inner */ {
|
|
padding-bottom: 0;
|
|
}
|
|
.clickable_f37cb1,
|
|
.container__2637a /* channel list inner */,
|
|
.header_f37cb1 /* server name */ {
|
|
background: none;
|
|
}
|
|
.scroller__629e4 /* channel list inner scroller */ {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* fix discord's idiotic server banners */
|
|
.bannerImage_f37cb1,
|
|
.bannerImg_f37cb1 {
|
|
width: 100%;
|
|
}
|
|
.bannerVisible_f37cb1 .headerEllipseBackdrop_f37cb1 {
|
|
display: none;
|
|
}
|
|
.headerGlass_f37cb1 {
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
width: auto;
|
|
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
|
|
}
|
|
|
|
.sidebar__5e434:after /* server list + channel list bottom shadow */ {
|
|
display: none;
|
|
}
|
|
|
|
.wrapper_ef3116 /* remove server list shadow */ {
|
|
mask: none;
|
|
}
|
|
|
|
.chat_f75fb0 /* chat group outer */ {
|
|
border: none !important;
|
|
background: none;
|
|
}
|
|
.chatContent_f75fb0 {
|
|
overflow: hidden;
|
|
}
|
|
.container__133bf /* friends page group outer */,
|
|
.page__5e434 {
|
|
padding-bottom: var(--gap);
|
|
padding-right: var(--gap);
|
|
border: none !important;
|
|
background: none;
|
|
}
|
|
.page__5e434 > .chat_f75fb0,
|
|
.page__5e434 > .container__133bf {
|
|
padding: 0;
|
|
}
|
|
|
|
.container__9293f /* friends, message requests, + other stuff titlebar */ {
|
|
margin-bottom: var(--gap);
|
|
}
|
|
|
|
.subtitleContainer_f75fb0 /* chat titlebar */ {
|
|
margin-bottom: var(--gap);
|
|
}
|
|
.title_f75fb0 /* chat titlebar inner */ {
|
|
border: none;
|
|
background: none;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.page__5e434 > div > .chat_f75fb0 > .content_f75fb0 /* chat outer */ {
|
|
border-left: none;
|
|
}
|
|
.tabBody__133bf /* friends page */ {
|
|
border: none !important;
|
|
}
|
|
|
|
.listeningAlong_e0cf27 /* user panel listening along */ {
|
|
border-top: none !important;
|
|
}
|
|
|
|
.container_c8ffbb /* member list */ {
|
|
margin-left: var(--gap);
|
|
overflow: hidden;
|
|
height: auto;
|
|
min-width: var(--custom-member-list-width);
|
|
}
|
|
.content_f75fb0 > .membersWrap_c8ffbb /* forum post member list */ {
|
|
margin-left: var(--gap);
|
|
overflow: hidden;
|
|
height: auto;
|
|
min-width: fit-content;
|
|
}
|
|
.members_c8ffbb /* member list inner */,
|
|
.member_c8ffbb /* member list item */ {
|
|
background: none;
|
|
}
|
|
|
|
.resizeHandle__01ae2 /* resize handle */ {
|
|
background: transparent;
|
|
}
|
|
|
|
.privateChannels_e6b769 /* dm list */,
|
|
.scroller__99e7c /* dm list inner */ {
|
|
background: none;
|
|
}
|
|
.scroller__99e7c /* dm list inner */ {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.tabBody__133bf /* online friends + active now group outer */ {
|
|
background: none;
|
|
}
|
|
|
|
.nowPlayingColumn__133bf /* active now */ {
|
|
margin-left: var(--gap);
|
|
}
|
|
.container__7d20c /* active now inner */ {
|
|
background: none;
|
|
}
|
|
.scroller__7d20c /* active now inner */ {
|
|
border: none;
|
|
}
|
|
|
|
.homeWrapper__0920e /* nitro page group inner */ {
|
|
border: none;
|
|
background: none;
|
|
}
|
|
.applicationStore_f07d62 /* nitro page group outer */ {
|
|
background: none;
|
|
}
|
|
|
|
.shop__6db1d /* shop */ {
|
|
overflow: hidden;
|
|
height: auto;
|
|
}
|
|
.shop__08415 /* shop inner scroller */ {
|
|
margin-top: calc(var(--custom-channel-header-height) * -1 - 16px);
|
|
}
|
|
|
|
.content_f75fb0 > aside > .outer_c0bea0 /* dm user panel */ {
|
|
margin-left: var(--gap);
|
|
overflow: hidden;
|
|
/* min-width: 340px; */
|
|
background-position: center calc(-1 * var(--border-thickness));
|
|
background-size: 100% calc(100% + 2 * var(--border-thickness));
|
|
}
|
|
|
|
.searchResultsWrap_a9e706 /* search results */ {
|
|
margin-left: var(--gap);
|
|
}
|
|
|
|
.notice__6e2b9 /* notice banner */ {
|
|
margin: 0 var(--gap) var(--gap) 0;
|
|
border-radius: var(--radius-md);
|
|
box-sizing: border-box;
|
|
height: 40px;
|
|
}
|
|
|
|
.container__01ae2 /* vc chat + titlebar group */ {
|
|
border: none;
|
|
background: none;
|
|
}
|
|
.chat_a44415::before /* vc chat shadow */ {
|
|
display: none;
|
|
}
|
|
.channelChatWrapper_cb9592 /* vc chat + titlebar group outer */ {
|
|
background: none;
|
|
}
|
|
|
|
.page__5e434 > div > .chatLayerWrapper__01ae2 /* forum/thread chat outer */ {
|
|
margin: 0 var(--gap) var(--gap) 0;
|
|
height: calc(100% - var(--gap));
|
|
}
|
|
.container__01ae2 /* forum/thread chat */ {
|
|
padding-left: calc((var(--gap) - var(--chat-resize-handle-width)));
|
|
}
|
|
|
|
.container_fb64c9 /* new thread panel */ {
|
|
background: none;
|
|
}
|
|
.chat_fb64c9::before /* new thread panel chat shadow */ {
|
|
display: none;
|
|
}
|
|
|
|
.container_a592e1 /* server discovery */ {
|
|
overflow: hidden;
|
|
}
|
|
.backdrop__8a7fc /* server discovery top bar */ {
|
|
background-color: var(--background-base-lower);
|
|
}
|
|
|
|
.wrapper_cb9592 /* dm vc wrapper */ {
|
|
background: none;
|
|
margin-bottom: var(--gap);
|
|
}
|
|
.wrapper_cb9592.fullScreen_cb9592 {
|
|
margin-top: var(--gap);
|
|
margin-left: var(--gap);
|
|
width: calc(100% - var(--gap));
|
|
height: calc(100% - var(--gap));
|
|
}
|
|
|
|
/* remove excess background from settings */
|
|
.standardSidebarView__23e6b,
|
|
.contentRegion__23e6b,
|
|
.sidebarRegionScroller__23e6b,
|
|
.contentRegionScroller__23e6b {
|
|
background: none;
|
|
}
|
|
.standardSidebarView__23e6b {
|
|
backdrop-filter: var(--panel-backdrop-filter);
|
|
}
|
|
|
|
/* remove excess backgrounds */
|
|
.wrapper_cdf8a9 /* message loading placeholders */,
|
|
.wrapper_cdf8a9 > .wrapper_fc8177 {
|
|
background: none;
|
|
}
|
|
.page__5e434 > .chat_f75fb0 /* friend page, server members page */ {
|
|
background: none !important;
|
|
}
|
|
|
|
.newMessagesBar__0f481 /* unread messages bar */ {
|
|
top: 12px;
|
|
left: 12px;
|
|
right: 12px;
|
|
border-radius: var(--radius-sm);
|
|
padding: 0 8px;
|
|
}
|
|
|
|
.bottom__7aaec /* channel list new unreads pill */,
|
|
.unreadBottom__629e4 /* channel list non-community unread pill */ {
|
|
bottom: 0;
|
|
}
|
|
|
|
.unreadMentionsIndicatorBottom_ef3116 /* server list new pill */,
|
|
.unreadMentionsIndicatorTop_ef3116 {
|
|
width: calc(var(--guildbar-avatar-size) + var(--custom-guild-list-padding) * 2);
|
|
padding: calc(var(--custom-guild-list-padding) / 2);
|
|
}
|
|
|
|
#vc-spotify-player /* vencord spotify plugin */ {
|
|
background: none;
|
|
}
|
|
|
|
/* general chat bar improvements */
|
|
.channelTextArea_f75fb0 /* chat bar */ {
|
|
border-radius: var(--radius-md);
|
|
}
|
|
.themedBackground__74017 /* chat bar inner */ {
|
|
background: none;
|
|
}
|
|
.slateTextArea_ec4baf /* actual typing area */ {
|
|
margin-left: 2px;
|
|
}
|
|
|
|
/* improve unread divider */
|
|
.divider__908e2 {
|
|
border-width: var(--divider-thickness);
|
|
border-radius: var(--divider-thickness);
|
|
}
|
|
.endCap__908e2 {
|
|
margin-top: calc(var(--divider-thickness) / -2);
|
|
}
|
|
.divider__908e2 .content__908e2 {
|
|
margin-top: calc(var(--divider-thickness) - var(--divider-thickness) * 2);
|
|
}
|
|
|
|
/* improve highlight message left edge */
|
|
.message__5126c.mentioned__5126c::before,
|
|
.replying__5126c::before,
|
|
.ephemeral__5126c::before {
|
|
width: var(--divider-thickness);
|
|
border-radius: var(--divider-thickness);
|
|
height: calc(100% - 2 * var(--radius-sm));
|
|
top: var(--radius-sm);
|
|
left: calc(var(--divider-thickness) / -2 + 1px);
|
|
left: calc(var(--radius-sm) / 2);
|
|
}
|
|
|
|
.message__5126c {
|
|
border-radius: var(--radius-md);
|
|
margin-left: 4px;
|
|
}
|
|
|
|
/* improve server selected marker */
|
|
.pill_e5445c.wrapper__58105 {
|
|
width: calc((var(--custom-guild-list-padding) - 4px) / 2 + 4px);
|
|
}
|
|
.item__58105 {
|
|
width: 4px;
|
|
border-radius: 4px;
|
|
margin-left: calc((var(--custom-guild-list-padding) - 4px) / 2);
|
|
}
|
|
|
|
/* improve embeds */
|
|
.embedFull__623de {
|
|
border: 4px solid var(--border-normal);
|
|
border-top-color: var(--border-subtle) !important;
|
|
border-top-width: 1px;
|
|
border-bottom-color: var(--border-subtle) !important;
|
|
border-bottom-width: 1px;
|
|
border-right-color: var(--border-subtle) !important;
|
|
border-right-width: 1px;
|
|
}
|
|
|
|
/* improve borders */
|
|
.reaction__23977 /* message reactions */,
|
|
.reactionBtn__23977.forceShow__23977 /* add reaction button */ {
|
|
border-width: 2px;
|
|
}
|
|
|
|
/* roundness */
|
|
.embedFull__623de /* embeds */,
|
|
.hljs /* code block */,
|
|
.imageWrapper_af017a /* image */,
|
|
.container__9271d /* thread link */ {
|
|
border-radius: var(--radius-md);
|
|
}
|
|
|
|
.outer_c0bea0 /* profile outer */,
|
|
.contentWrapper__08434 /* gif panel */ {
|
|
border-radius: var(--radius-lg);
|
|
}
|
|
.inner_c0bea0 /* profile inner */ {
|
|
border-radius: calc(var(--radius-lg) - 4px);
|
|
}
|
|
|
|
.outer_c0bea0 /* profile outer */ {
|
|
border: 1px solid var(--border-subtle);
|
|
background-position: center calc(-1 * var(--border-thickness));
|
|
background-size: 100% calc(100% + 2 * var(--border-thickness));
|
|
}
|
|
.root__24502 {
|
|
background: none;
|
|
}
|
|
|
|
/* remove unnecessary backgrounds */
|
|
.app__160d8,
|
|
#app-mount,
|
|
body {
|
|
background: transparent !important;
|
|
}
|
|
}
|
|
|
|
body {
|
|
--font-primary: var(--font), 'gg sans';
|
|
--font-display: var(--font), 'gg sans';
|
|
--font-code: var(--code-font), 'gg mono';
|
|
}
|
|
|
|
[class*='scroll'] {
|
|
will-change: scroll-position;
|
|
}
|
|
.burstGlow__23977 {
|
|
display: none;
|
|
}
|
|
|
|
/* animations.css */
|
|
body {
|
|
--list-item-transition: 0.2s ease; /* transition for list items */
|
|
--dms-icon-svg-transition: 0.4s ease; /* transition for the dms icon */
|
|
}
|
|
|
|
@property --animations {
|
|
syntax: 'off | on';
|
|
inherits: false;
|
|
initial-value: on;
|
|
}
|
|
|
|
@container body style(--animations: on) {
|
|
.visual-refresh {
|
|
/* list hover animations */
|
|
.wrapper__2ea32 .link__2ea32 /* channels */,
|
|
.container__91a9d /* members */,
|
|
.channel__972a0 /* dms */,
|
|
.side_aa8da2 .item_aa8da2 /* settings */ {
|
|
transition: margin-left var(--list-item-transition);
|
|
will-change: margin-left;
|
|
}
|
|
.wrapper__2ea32:hover .link__2ea32,
|
|
.side_aa8da2 .item_aa8da2:hover {
|
|
margin-left: 10px;
|
|
}
|
|
.container__91a9d:hover,
|
|
.channel__972a0:hover {
|
|
margin-left: 18px;
|
|
}
|
|
/* list hover channel dot */
|
|
.unread__2ea32 {
|
|
border-radius: 50%;
|
|
width: 8px;
|
|
height: 8px;
|
|
margin-left: -4px;
|
|
transition: var(--list-item-transition);
|
|
will-change: margin-left;
|
|
}
|
|
.wrapper__2ea32:hover .unread__2ea32 {
|
|
margin-left: 4px;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* background-image.css */
|
|
body {
|
|
--background-image-url: url('');
|
|
}
|
|
|
|
@property --background-image {
|
|
syntax: 'off | on';
|
|
inherits: false;
|
|
initial-value: off;
|
|
}
|
|
|
|
@container body style(--background-image: on) {
|
|
.visual-refresh #app-mount .bg__960e4 {
|
|
background: var(--background-image-url);
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
}
|
|
|
|
/* chatbar.css */
|
|
body {
|
|
--chatbar-height: 47px; /* height of the chatbar (52px by default, 47px to align it with the user panel) */
|
|
|
|
--custom-channel-textarea-text-area-height: var(--chatbar-height);
|
|
}
|
|
|
|
@property --custom-chatbar {
|
|
syntax: 'off | separated';
|
|
inherits: false;
|
|
initial-value: aligned;
|
|
}
|
|
|
|
.visual-refresh {
|
|
.attachWrapper__0923f {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
@container body style(--custom-chatbar: separated) {
|
|
.visual-refresh {
|
|
.chatContent_f75fb0 {
|
|
background: none;
|
|
border-radius: 0;
|
|
border: none;
|
|
backdrop-filter: none;
|
|
}
|
|
.messagesWrapper__36d07 {
|
|
background-color: var(--background-base-lower);
|
|
border-radius: var(--radius-lg);
|
|
border: var(--border-thickness) solid var(--border-subtle);
|
|
backdrop-filter: var(--panel-backdrop-filter);
|
|
transition: border-color var(--border-hover-transition);
|
|
overflow: hidden;
|
|
|
|
&:hover {
|
|
border-color: var(--border-hover);
|
|
}
|
|
}
|
|
.scrollerSpacer__36d07 {
|
|
height: calc(26px + var(--space-xs));
|
|
}
|
|
.scroller__36d07::-webkit-scrollbar-track {
|
|
margin-bottom: calc(26px);
|
|
}
|
|
.chatContent_f75fb0:has(.typing_b88801) .messagesWrapper__36d07::before {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: var(--background-base-lower);
|
|
height: 26px;
|
|
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
|
|
z-index: 2;
|
|
}
|
|
.form_f75fb0 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0;
|
|
width: 100%;
|
|
margin-top: 0;
|
|
}
|
|
.typing_b88801 {
|
|
position: absolute;
|
|
order: -1;
|
|
top: calc(-26px + var(--border-thickness) * -1);
|
|
left: calc(var(--border-thickness));
|
|
border-radius: 0 0 0 var(--radius-lg);
|
|
padding: 0 0 0 var(--space-sm);
|
|
height: 26px;
|
|
}
|
|
.channelBottomBarArea_f75fb0 {
|
|
margin-top: var(--gap);
|
|
}
|
|
.channelTextArea_f75fb0 {
|
|
margin: 0;
|
|
background-color: var(--background-base-lower);
|
|
border-radius: var(--radius-lg);
|
|
border: var(--border-thickness) solid var(--border-subtle);
|
|
backdrop-filter: var(--panel-backdrop-filter);
|
|
transition: border-color var(--border-hover-transition);
|
|
|
|
&:hover {
|
|
border-color: var(--border-hover);
|
|
}
|
|
}
|
|
.stackedBars__74017 {
|
|
background: none !important;
|
|
}
|
|
.wrapper__44df5 {
|
|
margin: var(--gap) 0 0 0;
|
|
height: var(--chatbar-height);
|
|
padding: 0;
|
|
border-radius: var(--radius-lg);
|
|
border: var(--border-thickness) solid var(--border-subtle);
|
|
backdrop-filter: var(--panel-backdrop-filter);
|
|
transition: border-color var(--border-hover-transition);
|
|
|
|
&:hover {
|
|
border-color: var(--border-hover);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
/* colors.css */
|
|
@property --colors {
|
|
syntax: 'on | off';
|
|
inherits: false;
|
|
initial-value: on;
|
|
}
|
|
|
|
:root {
|
|
--colors: on; /* turn off to use discord default colors */
|
|
|
|
/* text colors */
|
|
--text-0: white; /* text on colored elements */
|
|
--text-1: var(--text-2); /* other normally white text */
|
|
--text-2: white; /* headings and important text */
|
|
--text-3: hsl(200, 100%, 89%); /* normal text */
|
|
--text-4: hsl(201, 26%, 65%); /* icon buttons and channels */
|
|
--text-5: hsl(220, 15%, 42%); /* muted channels/chats and timestamps */
|
|
|
|
/* background and dark colors */
|
|
--bg-1: hsl(220, 15%, 20%); /* dark buttons when clicked */
|
|
--bg-2: hsl(220, 15%, 16%); /* dark buttons */
|
|
--bg-3: hsl(223, 17%, 8%); /* spacing, secondary elements */
|
|
--bg-4: hsla(220, 15%, 10%, 1); /* main background color */
|
|
--hover: hsla(230, 20%, 40%, 0.1); /* channels and buttons when hovered */
|
|
--active: hsla(220, 20%, 40%, 0.2); /* channels and buttons when clicked or selected */
|
|
--active-2: hsla(220, 19%, 40%, 0.3); /* extra state for transparent buttons */
|
|
--message-hover: hsla(220, 0%, 0%, 0.1); /* messages when hovered */
|
|
|
|
/* accent colors */
|
|
--accent-1: hsl(190, 70%, 60%); /* links and other accent text */
|
|
--accent-2: hsl(190, 70%, 48%); /* small accent elements */
|
|
--accent-3: hsl(190, 70%, 42%); /* accent buttons */
|
|
--accent-4: hsl(190, 70%, 36%); /* accent buttons when hovered */
|
|
--accent-5: hsl(190, 70%, 30%); /* accent buttons when clicked */
|
|
--accent-new: var(--accent-2); /* stuff that's normally red like mute/deafen buttons */
|
|
--mention: hsl(var(--yellow-300-hsl)/0.08); /* background of messages that mention you */
|
|
--mention-hover: hsla(200, 89%, 86%, 0.08); /* background of messages that mention you when hovered */
|
|
--reply: linear-gradient(to right, color-mix(in hsl, var(--text-3), transparent 90%) 40%, transparent); /* background of messages that reply to you */
|
|
--reply-hover: linear-gradient(to right, color-mix(in hsl, var(--text-3), transparent 95%) 40%, transparent); /* background of messages that reply to you when hovered */
|
|
|
|
/* status indicator colors */
|
|
--online: #23a55a; /* change to #43a25a for default */
|
|
--dnd: hsl(340, 60%, 60%); /* change to #d83a42 for default */
|
|
--idle: hsl(50, 60%, 60%); /* change to #ca9654 for default */
|
|
--streaming: hsl(260, 60%, 60%); /* change to #593695 for default */
|
|
--offline: var(--text-4); /* change to #83838b for default offline color */
|
|
|
|
/* border colors */
|
|
--border-light: var(--hover); /* light border color */
|
|
--border: var(--active); /* normal border color */
|
|
--button-border: hsl(220, 0%, 100%, 0.1); /* neutral border color of buttons */
|
|
|
|
/* base colors */
|
|
--red-1: oklch(76% 0.12 0);
|
|
--red-2: oklch(70% 0.12 0);
|
|
--red-3: oklch(64% 0.12 0);
|
|
--red-4: oklch(58% 0.12 0);
|
|
--red-5: oklch(52% 0.12 0);
|
|
|
|
--green-1: oklch(76% 0.11 170);
|
|
--green-2: oklch(70% 0.11 170);
|
|
--green-3: oklch(64% 0.11 170);
|
|
--green-4: oklch(58% 0.11 170);
|
|
--green-5: oklch(52% 0.11 160);
|
|
|
|
--blue-1: oklch(76% 0.1 215);
|
|
--blue-2: oklch(70% 0.1 215);
|
|
--blue-3: oklch(64% 0.1 215);
|
|
--blue-4: oklch(58% 0.1 215);
|
|
--blue-5: oklch(52% 0.1 215);
|
|
|
|
--yellow-1: oklch(80% 0.11 90);
|
|
--yellow-2: oklch(74% 0.11 90);
|
|
--yellow-3: oklch(68% 0.11 90);
|
|
--yellow-4: oklch(62% 0.11 90);
|
|
--yellow-5: oklch(56% 0.11 90);
|
|
|
|
--purple-1: oklch(76% 0.11 310);
|
|
--purple-2: oklch(70% 0.11 310);
|
|
--purple-3: oklch(64% 0.11 310);
|
|
--purple-4: oklch(58% 0.11 310);
|
|
--purple-5: oklch(52% 0.11 310);
|
|
}
|
|
|
|
@container root style(--colors: on) {
|
|
.visual-refresh body,
|
|
.visual-refresh .theme-dark:not(.custom-user-profile-theme),
|
|
.visual-refresh .theme-light:not(.custom-user-profile-theme) {
|
|
--activity-card-background: var(--bg-3);
|
|
--alert-bg: red;
|
|
--autocomplete-bg: var(--bg-3);
|
|
|
|
--background-accent: var(--bg-2);
|
|
--background-floating: var(--bg-3);
|
|
--background-nested-floating: var(--bg-4);
|
|
--background-mentioned: var(--mention);
|
|
--background-mentioned-hover: var(--mention-hover);
|
|
--background-message-automod: red;
|
|
--background-message-automod-hover: red;
|
|
--background-message-highlight: var(--reply);
|
|
--background-message-highlight-hover: var(--reply-hover);
|
|
--background-message-hover: var(--message-hover);
|
|
|
|
--background-primary: var(--bg-4);
|
|
--background-secondary: var(--bg-3);
|
|
--background-secondary-alt: var(--bg-3);
|
|
--background-tertiary: var(--bg-4);
|
|
|
|
--bg-base-primary: var(--bg-4); /* screenshare window? */
|
|
--bg-base-secondary: var(--bg-4);
|
|
--bg-base-tertiary: var(--bg-3);
|
|
--background-mod-subtle: var(--hover);
|
|
--background-mod-normal: var(--active);
|
|
--background-mod-strong: var(--active-2);
|
|
--background-base-low: var(--bg-4);
|
|
--background-base-lower: var(--bg-4);
|
|
--background-base-lowest: var(--bg-4);
|
|
--background-surface-high: var(--bg-3);
|
|
--background-surface-higher: var(--bg-3);
|
|
--background-surface-highest: var(--bg-3);
|
|
--bg-surface-overlay: var(--bg-4);
|
|
--bg-surface-raised: var(--bg-3);
|
|
--chat-background-default: var(--bg-3);
|
|
--chat-text-muted: var(--text-5);
|
|
--input-background: var(--bg-3);
|
|
--modal-background: var(--bg-4);
|
|
--modal-footer-background: var(--bg-4);
|
|
|
|
--background-modifier-accent: var(--hover);
|
|
--background-modifier-active: var(--active);
|
|
--background-modifier-hover: var(--hover);
|
|
--background-modifier-selected: var(--active);
|
|
|
|
--bg-mod-faint: var(--hover);
|
|
--bg-mod-subtle: var(--bg-2);
|
|
--bg-mod-strong: var(--bg-2);
|
|
--bg-brand: var(--accent-2);
|
|
|
|
--border-faint: var(--border-light);
|
|
--border-subtle: var(--border);
|
|
--border-normal: var(--border);
|
|
--border-strong: var(--border);
|
|
--input-border: var(--border);
|
|
|
|
--button-danger-background: var(--red-3);
|
|
--button-danger-background-active: var(--red-5);
|
|
--button-danger-background-hover: var(--red-4);
|
|
--button-danger-background-disabled: var(--red-5);
|
|
--button-danger-border: var(--button-border);
|
|
|
|
--button-filled-brand-text: var(--text-0);
|
|
--button-filled-brand-background: var(--accent-3);
|
|
--button-filled-brand-background-active: var(--accent-5);
|
|
--button-filled-brand-background-hover: var(--accent-4);
|
|
--button-filled-brand-border: var(--button-border);
|
|
|
|
--button-filled-brand-inverted-background: var(--text-1);
|
|
--button-filled-brand-inverted-background-active: var(--text-3);
|
|
--button-filled-brand-inverted-background-hover: var(--text-2);
|
|
--button-filled-brand-inverted-text: var(--bg-4);
|
|
--button-filled-white-background: var(--text-1);
|
|
--button-filled-white-background-active: var(--text-3);
|
|
--button-filled-white-background-hover: var(--text-2);
|
|
--button-filled-white-text: var(--bg-4);
|
|
|
|
--button-outline-danger-background: var(--bg-2);
|
|
--button-outline-danger-background-active: var(--text-5);
|
|
--button-outline-danger-background-hover: var(--bg-1);
|
|
--button-outline-danger-border: var(--border-light);
|
|
--button-outline-danger-border-active: var(--border-light);
|
|
--button-outline-danger-border-hover: var(--border-light);
|
|
--button-outline-danger-text: var(--red-1);
|
|
--button-outline-danger-text-active: var(--red-1);
|
|
--button-outline-danger-text-hover: var(--red-1);
|
|
|
|
--button-outline-primary-background: red;
|
|
--button-outline-primary-background-active: var(--active);
|
|
--button-outline-primary-background-hover: var(--hover);
|
|
--button-outline-primary-border: var(--text-5);
|
|
--button-outline-primary-border-active: var(--text-5);
|
|
--button-outline-primary-border-hover: var(--text-5);
|
|
--button-outline-primary-text: var(--text-3);
|
|
--button-outline-primary-text-active: var(--text-3);
|
|
--button-outline-primary-text-hover: var(--text-3);
|
|
|
|
--button-outline-positive-background: red;
|
|
--button-outline-positive-background-active: var(--green-4);
|
|
--button-outline-positive-background-hover: var(--green-3);
|
|
--button-outline-positive-border: var(--green-2);
|
|
--button-outline-positive-border-active: var(--green-4);
|
|
--button-outline-positive-border-hover: var(--green-3);
|
|
--button-outline-positive-text: var(--text-3);
|
|
--button-outline-positive-text-active: var(--text-0);
|
|
--button-outline-positive-text-hover: var(--text-0);
|
|
|
|
--button-positive-background: var(--green-2);
|
|
--button-positive-background-active: var(--green-4);
|
|
--button-positive-background-hover: var(--green-3);
|
|
--button-positive-background-disabled: var(--green-4);
|
|
--button-positive-border: var(--button-border);
|
|
|
|
--button-secondary-background: var(--bg-2);
|
|
--button-secondary-background-active: var(--text-5);
|
|
--button-secondary-background-hover: var(--bg-1);
|
|
--button-secondary-background-disabled: var(--bg-3);
|
|
--button-secondary-text: var(--text-3);
|
|
|
|
--button-transparent-background: var(--hover);
|
|
--button-transparent-background-active: var(--active-2);
|
|
--button-transparent-background-hover: var(--active);
|
|
--button-transparent-text: var(--text-3);
|
|
|
|
--redesign-button-secondary-text: var(--text-3);
|
|
|
|
--polls-voted-fill: color-mix(in hsl, var(--accent-2), transparent 90%);
|
|
--polls-victor-fill: color-mix(in hsl, var(--green-2), transparent 90%);
|
|
|
|
--card-primary-bg: var(--bg-3);
|
|
--card-secondary-bg: var(--bg-2);
|
|
--channel-icon: var(--text-4);
|
|
--channels-default: var(--text-4);
|
|
|
|
--embed-title: var(--text-2);
|
|
|
|
--header-primary: var(--text-2);
|
|
--header-secondary: var(--text-4);
|
|
--header-muted: var(--text-4);
|
|
|
|
--icon-muted: var(--text-5);
|
|
--icon-primary: var(--text-3);
|
|
--icon-secondary: var(--text-4);
|
|
--icon-tertiary: var(--text-4);
|
|
|
|
--info-danger-background: red;
|
|
--info-danger-text: red;
|
|
--info-help-background: color-mix(in hsl, var(--blue-2), transparent 80%);
|
|
--info-help-foreground: var(--blue-1);
|
|
--info-help-text: var(--blue-1);
|
|
--info-positive-background: color-mix(in hsl, var(--yellow-1), transparent 80%);
|
|
--info-positive-text: var(--green-1);
|
|
--info-warning-background: color-mix(in hsl, var(--yellow-2), transparent 80%);
|
|
--info-warning-text: var(--yellow-1);
|
|
|
|
--text-brand: var(--accent-1);
|
|
--text-danger: var(--red-1);
|
|
--text-link: var(--accent-1);
|
|
--text-link-low-saturation: red;
|
|
--text-low-contrast: var(--text-4);
|
|
--text-message-preview-low-sat: red;
|
|
--text-muted: var(--text-5);
|
|
--text-muted-on-default: var(--text-4);
|
|
--text-normal: var(--text-3);
|
|
--text-positive: var(--green-1);
|
|
--text-primary: var(--text-3);
|
|
--text-secondary: var(--text-4);
|
|
--text-warning: var(--yellow-1);
|
|
--text-default: var(--text-3);
|
|
--text-feedback-critical: var(--red-1);
|
|
--text-feedback-positive: var(--green-1);
|
|
--text-feedback-info: red;
|
|
--text-feedback-warning: var(--yellow-1);
|
|
--text-tertiary: var(--text-4);
|
|
|
|
--user-profile-overlay-background: var(--bg-4);
|
|
--user-profile-overlay-background-hover: var(--bg-2);
|
|
|
|
--status-danger: var(--red-2);
|
|
--status-danger-background: var(--red-3);
|
|
--status-danger-text: var(--white);
|
|
--status-dnd: var(--dnd); /* server profiles */
|
|
--status-idle: var(--idle);
|
|
--status-offline: var(--offline);
|
|
--status-online: var(--online);
|
|
--status-positive: var(--green-2);
|
|
--status-positive-background: var(--green-2);
|
|
--status-positive-text: var(--white);
|
|
--status-speaking: var(--green-2);
|
|
--status-warning: var(--yellow-2);
|
|
--status-warning-background: red;
|
|
--status-warning-text: var(--black);
|
|
|
|
--background-feedback-critical: color-mix(in hsl, var(--red-2), transparent 80%);
|
|
--background-feedback-info: color-mix(in hsl, var(--blue-2), transparent 80%);
|
|
--background-feedback-positive: color-mix(in hsl, var(--green-2), transparent 80%);
|
|
--background-feedback-warning: color-mix(in hsl, var(--yellow-2), transparent 80%);
|
|
|
|
--interactive-normal: var(--text-4);
|
|
--interactive-hover: var(--text-3);
|
|
--interactive-active: var(--text-3);
|
|
--interactive-muted: var(--text-5);
|
|
|
|
--mention-foreground: var(--accent-1);
|
|
--mention-background: color-mix(in hsl, var(--accent-2), transparent 90%);
|
|
|
|
--channel-text-area-placeholder: var(--text-5);
|
|
|
|
--message-reacted-text: var(--text-2);
|
|
--message-reacted-background: color-mix(in hsl, var(--accent-2), transparent 80%);
|
|
|
|
--custom-channel-members-bg: var(--bg-4);
|
|
|
|
--redesign-input-control-selected: var(--accent-2);
|
|
|
|
--scrollbar-auto-thumb: var(--bg-3);
|
|
--scrollbar-auto-track: transparent;
|
|
--scrollbar-thin-thumb: var(--bg-3);
|
|
--scrollbar-thin-track: transparent;
|
|
|
|
--white: var(--text-0);
|
|
--white-500: var(--text-1);
|
|
--redesign-button-overlay-alpha-text: var(--text-2);
|
|
|
|
--brand-360: var(--accent-2);
|
|
--brand-500: var(--accent-2);
|
|
--blurple-50: var(--accent-2);
|
|
|
|
--red-400: var(--red-2);
|
|
--red-500: var(--red-3);
|
|
|
|
--green-360: var(--green-2); /* seems to be mostly used by vencord plugins */
|
|
--primary-400: var(--text-4);
|
|
|
|
--deprecated-text-input-bg: var(--bg-3);
|
|
--deprecated-text-input-border: var(--border-light);
|
|
|
|
--background-code: var(--bg-3);
|
|
|
|
/* --control-background-active-active: var(--green-new-62);
|
|
--control-background-active-default: var(--green-new-50);
|
|
--control-background-active-hover: var(--green-new-55);
|
|
--control-background-active-loading: var(--green-new-50); */
|
|
--control-background-critical-primary-active: var(--red-5);
|
|
--control-background-critical-primary-default: var(--red-3);
|
|
--control-background-critical-primary-hover: var(--red-4);
|
|
--control-background-critical-primary-loading: var(--red-3);
|
|
--control-background-critical-secondary-active: var(--text-5);
|
|
--control-background-critical-secondary-default: var(--bg-2);
|
|
--control-background-critical-secondary-hover: var(--bg-1);
|
|
--control-background-critical-secondary-loading: var(--bg-2);
|
|
/* --control-background-expressive-active: var(--neutral-10);
|
|
--control-background-expressive-default: var(--neutral-1);
|
|
--control-background-expressive-hover: var(--neutral-1);
|
|
--control-background-expressive-loading: var(--neutral-1);
|
|
--control-background-icon-only-active: hsl(var(--opacity-20-hsl) / 0.2);
|
|
--control-background-icon-only-hover: hsl(var(--opacity-16-hsl) / 0.1607843137254902);
|
|
--control-background-overlay-primary-active: var(--neutral-17);
|
|
--control-background-overlay-primary-default: var(--neutral-1);
|
|
--control-background-overlay-primary-hover: var(--neutral-9);
|
|
--control-background-overlay-primary-loading: var(--neutral-1);
|
|
--control-background-overlay-secondary-active: hsl(var(--opacity-black-48-hsl) / 0.47843137254901963);
|
|
--control-background-overlay-secondary-default: hsl(var(--opacity-black-52-hsl) / 0.5215686274509804);
|
|
--control-background-overlay-secondary-hover: hsl(var(--opacity-black-64-hsl) / 0.6392156862745098);
|
|
--control-background-overlay-secondary-loading: hsl(var(--opacity-black-52-hsl) / 0.5215686274509804); */
|
|
--control-background-primary-active: var(--accent-5);
|
|
--control-background-primary-default: var(--accent-3);
|
|
--control-background-primary-hover: var(--accent-4);
|
|
--control-background-primary-loading: var(--accent-3);
|
|
--control-background-secondary-active: var(--text-5);
|
|
--control-background-secondary-default: var(--bg-2);
|
|
--control-background-secondary-hover: var(--bg-1);
|
|
--control-background-secondary-loading: var(--bg-2);
|
|
/* --control-border-active-active: hsl(var(--opacity-white-8-hsl) / 0.0784313725490196);
|
|
--control-border-active-default: hsl(var(--opacity-white-8-hsl) / 0.0784313725490196);
|
|
--control-border-active-hover: hsl(var(--opacity-white-8-hsl) / 0.0784313725490196);
|
|
--control-border-active-loading: hsl(var(--opacity-white-8-hsl) / 0.0784313725490196); */
|
|
--control-border-critical-primary-active: var(--button-border);
|
|
--control-border-critical-primary-default: var(--button-border);
|
|
--control-border-critical-primary-hover: var(--button-border);
|
|
--control-border-critical-primary-loading: var(--button-border);
|
|
--control-border-critical-secondary-active: var(--border-light);
|
|
--control-border-critical-secondary-default: var(--border-light);
|
|
--control-border-critical-secondary-hover: var(--border-light);
|
|
--control-border-critical-secondary-loading: var(--border-light);
|
|
/* --control-border-expressive-active: hsl(var(--opacity-12-hsl) / 0.12156862745098039);
|
|
--control-border-expressive-default: hsl(var(--opacity-12-hsl) / 0.12156862745098039);
|
|
--control-border-expressive-hover: hsl(var(--opacity-12-hsl) / 0.12156862745098039);
|
|
--control-border-expressive-loading: hsl(var(--opacity-12-hsl) / 0.12156862745098039);
|
|
--control-border-icon-only-active: hsl(var(--opacity-4-hsl) / 0.0392156862745098);
|
|
--control-border-icon-only-hover: hsl(var(--opacity-4-hsl) / 0.0392156862745098);
|
|
--control-border-overlay-primary-active: hsl(var(--opacity-12-hsl) / 0.12156862745098039);
|
|
--control-border-overlay-primary-default: hsl(var(--opacity-12-hsl) / 0.12156862745098039);
|
|
--control-border-overlay-primary-hover: hsl(var(--opacity-12-hsl) / 0.12156862745098039);
|
|
--control-border-overlay-primary-loading: hsl(var(--opacity-12-hsl) / 0.12156862745098039);
|
|
--control-border-overlay-secondary-active: hsl(var(--opacity-4-hsl) / 0.0392156862745098);
|
|
--control-border-overlay-secondary-default: hsl(var(--opacity-4-hsl) / 0.0392156862745098);
|
|
--control-border-overlay-secondary-hover: hsl(var(--opacity-4-hsl) / 0.0392156862745098);
|
|
--control-border-overlay-secondary-loading: hsl(var(--opacity-4-hsl) / 0.0392156862745098); */
|
|
--control-border-primary-active: var(--button-border);
|
|
--control-border-primary-default: var(--button-border);
|
|
--control-border-primary-hover: var(--button-border);
|
|
--control-border-primary-loading: var(--button-border);
|
|
--control-border-secondary-active: var(--border-light);
|
|
--control-border-secondary-default: var(--border-light);
|
|
--control-border-secondary-hover: var(--border-light);
|
|
--control-border-secondary-loading: var(--border-light);
|
|
/*--control-brand-foreground: var(--brand-360);
|
|
--control-brand-foreground-new: var(--brand-360);
|
|
--control-icon-active-active: var(--white);
|
|
--control-icon-active-default: var(--white);
|
|
--control-icon-active-hover: var(--white);
|
|
--control-icon-active-loading: var(--white);
|
|
--control-icon-critical-primary-active: var(--white);
|
|
--control-icon-critical-primary-default: var(--white);
|
|
--control-icon-critical-primary-hover: var(--white);
|
|
--control-icon-critical-primary-loading: var(--white);
|
|
--control-icon-critical-secondary-active: var(--red-new-22);
|
|
--control-icon-critical-secondary-default: var(--red-new-22);
|
|
--control-icon-critical-secondary-hover: var(--red-new-22);
|
|
--control-icon-critical-secondary-loading: var(--red-new-22);
|
|
--control-icon-expressive-active: var(--black);
|
|
--control-icon-expressive-default: var(--black);
|
|
--control-icon-expressive-hover: var(--black);
|
|
--control-icon-expressive-loading: var(--black);
|
|
--control-icon-icon-only-active: var(--neutral-1);
|
|
--control-icon-icon-only-default: var(--neutral-16);
|
|
--control-icon-icon-only-hover: var(--neutral-1);
|
|
--control-icon-icon-only-loading: var(--neutral-1);
|
|
--control-icon-overlay-primary-active: var(--black);
|
|
--control-icon-overlay-primary-default: var(--black);
|
|
--control-icon-overlay-primary-hover: var(--black);
|
|
--control-icon-overlay-primary-loading: var(--black);
|
|
--control-icon-overlay-secondary-active: var(--white);
|
|
--control-icon-overlay-secondary-default: var(--white);
|
|
--control-icon-overlay-secondary-hover: var(--white);
|
|
--control-icon-overlay-secondary-loading: var(--white);
|
|
--control-icon-primary-active: var(--white);
|
|
--control-icon-primary-default: var(--white);
|
|
--control-icon-primary-hover: var(--white);
|
|
--control-icon-primary-loading: var(--white);
|
|
--control-icon-secondary-active: var(--neutral-1);
|
|
--control-icon-secondary-default: var(--neutral-1);
|
|
--control-icon-secondary-hover: var(--neutral-1);
|
|
--control-icon-secondary-loading: var(--neutral-1);
|
|
--control-text-active-active: var(--white);
|
|
--control-text-active-default: var(--white);
|
|
--control-text-active-hover: var(--white);
|
|
--control-text-active-loading: var(--white);*/
|
|
--control-text-critical-primary-active: var(--text-0);
|
|
--control-text-critical-primary-default: var(--text-0);
|
|
--control-text-critical-primary-hover: var(--text-0);
|
|
--control-text-critical-primary-loading: var(--text-0);
|
|
--control-text-critical-secondary-active: var(--red-2);
|
|
--control-text-critical-secondary-default: var(--red-2);
|
|
--control-text-critical-secondary-hover: var(--red-2);
|
|
--control-text-critical-secondary-loading: var(--red-2);
|
|
/* --control-text-expressive-active: var(--black);
|
|
--control-text-expressive-default: var(--black);
|
|
--control-text-expressive-hover: var(--black);
|
|
--control-text-expressive-loading: var(--black);
|
|
--control-text-overlay-primary-active: var(--black);
|
|
--control-text-overlay-primary-default: var(--black);
|
|
--control-text-overlay-primary-hover: var(--black);
|
|
--control-text-overlay-primary-loading: var(--black);
|
|
--control-text-overlay-secondary-active: var(--white);
|
|
--control-text-overlay-secondary-default: var(--white);
|
|
--control-text-overlay-secondary-hover: var(--white);
|
|
--control-text-overlay-secondary-loading: var(--white); */
|
|
--control-text-primary-active: var(--text-0);
|
|
--control-text-primary-default: var(--text-0);
|
|
--control-text-primary-hover: var(--text-0);
|
|
--control-text-primary-loading: var(--text-0);
|
|
--control-text-secondary-active: var(--text-3);
|
|
--control-text-secondary-default: var(--text-3);
|
|
--control-text-secondary-hover: var(--text-3);
|
|
--control-text-secondary-loading: var(--text-3);
|
|
}
|
|
|
|
.visual-refresh {
|
|
::placeholder {
|
|
color: var(--text-5);
|
|
}
|
|
|
|
.bg__960e4 /* main background */ {
|
|
background: var(--bg-3);
|
|
}
|
|
|
|
.modeUnreadImportant__2ea32 .icon__2ea32,
|
|
.wrapper__2ea32:hover .icon__2ea32 /* correct channel icon color */ {
|
|
color: var(--text-3);
|
|
}
|
|
|
|
.text_b88801 > strong /* xxx is typing.. */ {
|
|
color: var(--text-3);
|
|
}
|
|
|
|
.hiddenVisually_b18fe2[aria-expanded="false"] > .folderPreviewWrapper__48112 /* collapsed folders */ {
|
|
--background-primary: var(--bg-3);
|
|
}
|
|
|
|
.panel__5dec7 /* game activity panel */,
|
|
.container__722ff /* background between vc and vc chat */ {
|
|
background: none;
|
|
}
|
|
|
|
.side_aa8da2 .item_aa8da2:hover /* settings tab */ {
|
|
background-color: var(--bg-3) !important;
|
|
}
|
|
.side_aa8da2 .item_aa8da2:active,
|
|
.side_aa8da2 .item_aa8da2.selected_aa8da2 {
|
|
background-color: var(--bg-2) !important;
|
|
}
|
|
|
|
.quickSelectPopout_ebaca5 /* dm vc region select popout */,
|
|
.participantsButton__211d1 /* vc participants button */,
|
|
.voiceBar__7aaec /* n in voice bar (channel list) */,
|
|
.mainCard_f369db /* form posts */,
|
|
.accountProfileCard__1fed1 /* account settings profile background */ {
|
|
background-color: var(--bg-3);
|
|
}
|
|
|
|
.colorable_f1ceac.primaryDark_f1ceac,
|
|
.reaction_f8896c /* forum post reaction */ {
|
|
background-color: var(--bg-2);
|
|
}
|
|
|
|
.expandedFolderIconWrapper__48112 > svg[style="color: rgb(88, 101, 242);"] /* folder icon */ {
|
|
color: var(--accent-2) !important;
|
|
}
|
|
.colorPickerSwatch__459fb[style="background-color: rgb(88, 101, 242);"] /* folder color picker swatch */,
|
|
.newBadge_faa96b /* forum post new badge */,
|
|
.mentioned__5126c:before /* mention message left edge */ {
|
|
background-color: var(--accent-2) !important;
|
|
}
|
|
.replying__5126c:before /* reply message left edge */ {
|
|
background-color: var(--text-2) !important;
|
|
}
|
|
|
|
.badge_c3d04b /* shop "orbs exclusive" badge */ {
|
|
background-color: var(--text-1);
|
|
}
|
|
|
|
#app-mount .message__5126c.replying__5126c:hover /* override fix for message reply hover */ {
|
|
background: var(--reply-hover);
|
|
}
|
|
|
|
.visual-refresh .voiceBar__7aaec .barText__7aaec, .visual-refresh .voiceChannelsIcon__7aaec /* x in voice bar text */ {
|
|
color: var(--accent-2);
|
|
}
|
|
|
|
.ephemeral__5126c /* ephemeral messages */ {
|
|
background: var(--mention) !important;
|
|
}
|
|
.ephemeral__5126c:hover {
|
|
background: var(--mention-hover) !important;
|
|
}
|
|
|
|
.botTagRegular__82f07 /* bot tag */ {
|
|
background-color: var(--accent-2);
|
|
}
|
|
.botTagOP__82f07 /* forum post op tag */ {
|
|
color: var(--text-0);
|
|
}
|
|
|
|
.container__3f21e /* settings checkbutton background */ {
|
|
background-color: var(--bg-1) !important;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
.container__3f21e.checked__3f21e /* settings checkbutton background */ {
|
|
background-color: var(--accent-2) !important;
|
|
}
|
|
.container__3f21e .slider__3f21e > svg > path /* settings checkbutton check */ {
|
|
fill: var(--bg-1) !important;
|
|
transition: fill 0.2s ease;
|
|
}
|
|
.container__3f21e.checked__3f21e .slider__3f21e > svg > path /* settings checkbutton check */ {
|
|
fill: var(--accent-2) !important;
|
|
}
|
|
.container__3f21e rect[fill='white'] /* settings checkbutton slider */ {
|
|
fill: var(--text-3) !important;
|
|
transition: fill 0.2s ease;
|
|
}
|
|
.container__3f21e.checked__3f21e rect[fill='white'] /* settings checkbutton slider */ {
|
|
fill: var(--text-0) !important;
|
|
}
|
|
|
|
.refreshIcon__88a69 /* settings radiobutton center */ {
|
|
fill: var(--text-0);
|
|
}
|
|
|
|
.categoryText_d02962 /* gif chooser category names */,
|
|
.bannerColor_fb7f94 /* profile banner button */,
|
|
.backButton_e4cb9a /* stream preview back button */,
|
|
.viewersIcon_d6b206 /* stream preview viewers icon */,
|
|
.bottomControls_e4cb9a /* stream preview viewer number */,
|
|
.pictureInPictureVideo_e4cb9a .controlIcon_f1ceac /* stream preview control icon */,
|
|
.bannerVisible_f37cb1 .name_f37cb1 /* server name over banner image */,
|
|
.dropdownButtonBannerVisible__2637a /* server name over banner dropdown button */,
|
|
.mediaMosaicAltText__0f481 /* image alt text label */ {
|
|
color: var(--text-1);
|
|
}
|
|
.headerText_e4cb9a.base_eb1a4c /* stream preview header text */,
|
|
.participantName__2cdb8 /* stream preview participant name */ {
|
|
color: var(--text-1) !important;
|
|
}
|
|
.playPausePopIcon_cf09d8 > path /* video play/pause popup */ {
|
|
fill: var(--text-1);
|
|
}
|
|
.headerTitle_e4cb9a:hover /* stream preview header title hover underline */ {
|
|
border-color: var(--text-1) !important;
|
|
}
|
|
.controlIcon_cf09d8 /* video play button */,
|
|
.wrapper_cf09d8 /* video time */,
|
|
.iconWrapper__6eb54 /* video initial play button */,
|
|
.wrapper__926d7 /* youtube embed play button */,
|
|
.viewersIcon_d6b206:hover /* stream preview viewers icon */ ,
|
|
.headerTitle_e4cb9a:hover .backButton_e4cb9a /* stream preview back button hover */,
|
|
.viewersIcon_d6b206:hover /* stream preview viewers icon */,
|
|
.pictureInPictureVideo_e4cb9a .controlIcon_f1ceac:hover /* stream preview control icon */ {
|
|
color: var(--text-2);
|
|
}
|
|
.wrapper__926d7 a:link,
|
|
.wrapper__926d7 a:visited,
|
|
.headerTitle_e4cb9a:hover .headerText_e4cb9a.base_eb1a4c /* stream preview back button hover */ {
|
|
color: var(--text-2) !important;
|
|
}
|
|
.downloadHoverButtonIcon__6c706 /* video download button */,
|
|
.iconContainer__211d1>svg /* vc participants button icon */,
|
|
.selectedIcon__2f4f7 /* vc selected camera icon */,
|
|
.colorable_f1ceac.primaryDark_f1ceac .centerIcon_f1ceac /* vc icon button */,
|
|
.colorable_f1ceac.primaryDark_f1ceac /* vc icon button nub */,
|
|
.iconBadge__650eb.base__2b1f5 /* server vc badge */,
|
|
#app-mount .akaBadge__488b1 /* aka badge */,
|
|
.message__9a9f9 /* you have unsaved settings message */,
|
|
.friendRequestsButton__523aa .base__2b1f5 /* inbox friend request number */,
|
|
.textBadge__2b1f5[style='background-color: var(--background-accent);'],
|
|
.tooltipBlack__382e7 /* server boost tooltip */,
|
|
.colorable_f1ceac.primaryDark_f1ceac, .colorable_f1ceac.primaryDark_f1ceac .centerIcon_f1ceac /* vc buttons */ {
|
|
color: var(--text-3);
|
|
}
|
|
.status__2f4f7 path[fill='var(--white)'],
|
|
.emptyChannelIcon__00de6 path[fill='var(--white)'] /* channel start icon */ {
|
|
fill: var(--text-3);
|
|
}
|
|
.grabber_a562c8 /* vc volume slider grabber */ {
|
|
background-color: var(--text-3);
|
|
}
|
|
.textBadge__2b1f5 /* new text badge (right click on person in vc) */ {
|
|
color: var(--text-0);
|
|
}
|
|
|
|
.unread__3b95d /* new unreads bar (channel list */ {
|
|
color: var(--text-4);
|
|
}
|
|
|
|
.colorable_f1ceac.white_f1ceac /* vc icon button nub when white */ {
|
|
background-color: var(--primary-130);
|
|
color: var(--bg-4);
|
|
}
|
|
|
|
.iconBadge__650eb.isCurrentUserConnected__650eb /* green vc badge when connected */ {
|
|
color: var(--text-0);
|
|
}
|
|
|
|
.lookOutlined__201d5.colorWhite__201d5 /* outline buttons */ {
|
|
border-color: var(--text-5);
|
|
color: var(--text-3);
|
|
}
|
|
|
|
.container__37e49 /* user panel buttons */,
|
|
.numberBadge__2b1f5 /* unread number badge */,
|
|
.toolbar__9293f /* toolbar button strikethroughs */ {
|
|
--status-danger: var(--accent-new);
|
|
}
|
|
|
|
.container__37e49 .button__67645.redGlow__67645 /* user panel button backgrounds*/ {
|
|
background-color: color-mix(in hsl, var(--accent-new), transparent 90%);
|
|
}
|
|
.container__37e49 .button__67645.enabled__67645.redGlow__67645:hover /* user panel button backgrounds hover */ {
|
|
background-color: color-mix(in hsl, var(--accent-new), transparent 80%);
|
|
}
|
|
|
|
.divider__5126c /* unread divider */ {
|
|
--divider-color: var(--accent-new);
|
|
}
|
|
|
|
.iconBadge__9293f /* icon badge */,
|
|
.mentionsBar__7aaec /* new mention pill */,
|
|
.mention__3b95d /* server list new mention pill */ {
|
|
background-color: var(--accent-new);
|
|
}
|
|
|
|
.newMessagesBar__0f481 /* unread bar */ {
|
|
background-color: var(--accent-3);
|
|
}
|
|
.barButtonAlt__0f481 /* unread bar mark as read button */ {
|
|
--button-secondary-background: var(--accent-3);
|
|
--button-secondary-background-hover: var(--accent-4);
|
|
}
|
|
|
|
.updateIconForeground__49676 /* update button */ {
|
|
fill: var(--green-1);
|
|
}
|
|
|
|
.colorable_f1ceac.red_f1ceac:hover /* vc disconnect button hover */ {
|
|
background-color: var(--red-4);
|
|
}
|
|
.button_f7ecac.dangerous_f7ecac:hover /* image attachment delete button hover in chat bar */ {
|
|
color: var(--red-4);
|
|
}
|
|
.contentWrapper__08434 ::-webkit-scrollbar-thumb /* gif picker scrollbar */ {
|
|
background-color: var(--bg-1);
|
|
}
|
|
|
|
.circleIconButton__5bc7e /* new server button */ {
|
|
color: var(--text-3);
|
|
}
|
|
.circleIconButton__5bc7e:hover {
|
|
color: var(--bg-4);
|
|
}
|
|
|
|
.tooltipGrey_c36707 /* spotify plugin time tooltip */ {
|
|
color: var(--text-3);
|
|
background-color: var(--bg-3);
|
|
}
|
|
|
|
.textContentFooter__9a337 /* forum post image fade */ {
|
|
background: linear-gradient(0deg, var(--bg-4), transparent);
|
|
}
|
|
|
|
.result__2dc39:after /* remove gif hover overlay */ {
|
|
display: none;
|
|
}
|
|
.result__2dc39:hover /* gif hover */ {
|
|
outline: 2px solid var(--accent-2);
|
|
}
|
|
|
|
.reactionBtn__23977.forceShow__23977:hover /* fix add reaction button border hover */ {
|
|
border-color: var(--bg-2);
|
|
}
|
|
|
|
.flash__03436[data-flash=true] /* reply message flash */ {
|
|
background: var(--background-message-highlight);
|
|
}
|
|
|
|
/* status indicators */
|
|
rect[fill='#82838b'] {
|
|
fill: var(--offline);
|
|
}
|
|
.status_a423bd[style='background-color: rgb(130, 131, 139);'] {
|
|
background-color: var(--offline) !important;
|
|
}
|
|
rect[fill='#43a25a'],
|
|
path[fill='#43a25a'] /* status activity icon */,
|
|
path[fill='var(--status-positive)'] /* status activity icon */,
|
|
.vc-platform-indicator > svg[fill="#43a25a"] {
|
|
fill: var(--online);
|
|
}
|
|
.status_a423bd[style='background-color: rgb(67, 162, 90);'] {
|
|
background-color: var(--online) !important;
|
|
}
|
|
rect[fill='#ca9654'],
|
|
.vc-platform-indicator > svg[fill='#ca9654'] {
|
|
fill: var(--idle);
|
|
}
|
|
.status_a423bd[style='background-color: rgb(202, 150, 84);'] {
|
|
background-color: var(--idle) !important;
|
|
}
|
|
rect[fill='#d83a42'],
|
|
.vc-platform-indicator > svg[fill='#d83a42'] {
|
|
fill: var(--dnd);
|
|
}
|
|
.status_a423bd[style='background-color: rgb(216, 58, 66);'] {
|
|
background-color: var(--dnd) !important;
|
|
}
|
|
rect[fill='#9147ff'] {
|
|
fill: var(--streaming);
|
|
}
|
|
div[style='display: flex; justify-content: center; align-items: center; border-radius: 5px; background-color: rgb(67, 162, 90); height: 10px; width: 25px;'] {
|
|
background-color: var(--online) !important;
|
|
}
|
|
|
|
/* fix radio bar button colors */
|
|
.radioBar__88a69[style='--radio-bar-accent-color: var(--yellow-360); padding: 10px;'] {
|
|
--radio-bar-accent-color: var(--yellow-2) !important;
|
|
}
|
|
.radioBar__88a69[style='--radio-bar-accent-color: var(--green-360); padding: 10px;'] {
|
|
--radio-bar-accent-color: var(--green-2) !important;
|
|
}
|
|
.radioBar__88a69[style='--radio-bar-accent-color: var(--red-400); padding: 10px;'] {
|
|
--radio-bar-accent-color: var(--red-2) !important;
|
|
}
|
|
|
|
#vc-spotify-player {
|
|
--vc-spotify-green: var(--accent-2);
|
|
}
|
|
.barFill_a562c8 {
|
|
background-color: var(--accent-2) !important;
|
|
}
|
|
|
|
.vcd-screen-picker-option-radio[data-checked='true'] .defaultColor__4bd52 {
|
|
color: var(--text-0);
|
|
}
|
|
|
|
.memberRowContainer__71c22.memberSelected__71c22 td {
|
|
background: var(--bg-3);
|
|
}
|
|
}
|
|
|
|
::selection,
|
|
.highlight {
|
|
background: var(--accent-3);
|
|
color: var(--text-0);
|
|
}
|
|
}
|
|
|
|
/* dms-button.css */
|
|
@property --dms-icon {
|
|
syntax: 'default | off | on';
|
|
inherits: false;
|
|
initial-value: on;
|
|
}
|
|
|
|
body {
|
|
--dms-icon: on;
|
|
--dms-icon-svg-url: url("https://raw.githubusercontent.com/squidfunk/mkdocs-material/refs/heads/master/material/templates/.icons/material/shield-moon.svg"); /* icon svg url. MUST BE A SVG. old icon: https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg */
|
|
--dms-icon-svg-size: 90%; /* size of the svg (css mask-size) */
|
|
--dms-icon-color-before: var(--icon-secondary);
|
|
--dms-icon-color-after: var(--white);
|
|
--dms-background-image-url: url('https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/logos/exports/1544x1544_circle.png');
|
|
--dms-background-image-size: cover; /* size of the background image (css background-size) */
|
|
--dms-background-color: linear-gradient(70deg, var(--blue-2), var(--purple-2), var(--red-2)); /* color of the background image (css background) */
|
|
}
|
|
|
|
@container body style(--dms-icon: on) {
|
|
.wrapper__6e9f8[data-list-item-id='guildsnav___home'] > .childWrapper__6e9f8 > svg {
|
|
display: none;
|
|
}
|
|
.wrapper__6e9f8[data-list-item-id='guildsnav___home'] > .childWrapper__6e9f8::before {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
width: 65%;
|
|
height: 65%;
|
|
background: var(--dms-icon-color-before);
|
|
mask-image: var(--dms-icon-svg-url);
|
|
mask-size: var(--dms-icon-svg-size);
|
|
mask-position: center;
|
|
mask-repeat: no-repeat;
|
|
transition: background-color 0.15s ease-out;
|
|
}
|
|
.wrapper__6e9f8[data-list-item-id='guildsnav___home']:hover > .childWrapper__6e9f8::before {
|
|
transform: rotate(0deg) scale(1);
|
|
}
|
|
.wrapper__6e9f8[data-list-item-id='guildsnav___home']:hover > .childWrapper__6e9f8::before,
|
|
.wrapper__6e9f8[data-list-item-id='guildsnav___home'].selected__6e9f8 > .childWrapper__6e9f8::before {
|
|
background: var(--dms-icon-color-after);
|
|
transform: rotate(-360deg) scale(0.8);
|
|
}
|
|
|
|
@container body style(--animations: on) {
|
|
.wrapper__6e9f8[data-list-item-id='guildsnav___home'] .childWrapper__6e9f8::before {
|
|
transition: background-color 0.15s ease-out, transform var(--dms-icon-svg-transition);
|
|
}
|
|
}
|
|
}
|
|
|
|
@container body style(--dms-icon: off) {
|
|
.wrapper__6e9f8[data-list-item-id='guildsnav___home'] > .childWrapper__6e9f8 > svg {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@property --dms-background {
|
|
syntax: 'off | image | color';
|
|
inherits: false;
|
|
initial-value: off;
|
|
}
|
|
|
|
@container body style(--dms-background: image) {
|
|
.wrapper__6e9f8[data-list-item-id='guildsnav___home'] > .childWrapper__6e9f8 {
|
|
background-image: var(--dms-background-image-url);
|
|
background-color: transparent !important;
|
|
background-size: var(--dms-background-image-size);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
}
|
|
|
|
@container body style(--dms-background: color) {
|
|
.wrapper__6e9f8[data-list-item-id='guildsnav___home'] > .childWrapper__6e9f8 {
|
|
background: var(--dms-background-color);
|
|
}
|
|
}
|
|
|
|
/* flipped-chatbar.css */
|
|
@property --flipped-chatbar {
|
|
syntax: 'on | off';
|
|
inherits: false;
|
|
initial-value: on;
|
|
}
|
|
|
|
body {
|
|
--chatbar-height: 47px; /* height of the chatbar */
|
|
--chatbar-padding: 3px; /* padding of the chatbar */
|
|
--custom-channel-textarea-text-area-height: var(--chatbar-height);
|
|
}
|
|
|
|
@container body style(--flipped-chatbar: on) {
|
|
.visual-refresh {
|
|
.form_f75fb0 {
|
|
margin: 0 var(--chatbar-padding) var(--chatbar-padding) var(--chatbar-padding);
|
|
padding: 0;
|
|
--chatbar-border-color: var(--border-faint);
|
|
}
|
|
.channelTextArea_f75fb0 {
|
|
margin: 0;
|
|
border-color: var(--chatbar-border-color);
|
|
transition: none;
|
|
}
|
|
.base_b88801 {
|
|
top: -25px;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: var(--chat-background-default);
|
|
padding: 0 8px;
|
|
border-radius: var(--radius-md) var(--radius-md) 0 0;
|
|
border: 1px solid var(--chatbar-border-color);
|
|
border-bottom: none;
|
|
transition: none;
|
|
}
|
|
.stackedBars__74017,
|
|
.threadSuggestionBar__841c8 {
|
|
border-color: var(--chatbar-border-color) !important;
|
|
}
|
|
.stackedBars__74017 {
|
|
background: none !important;
|
|
}
|
|
.form_f75fb0:has(.base_b88801) {
|
|
.channelTextArea_f75fb0 {
|
|
border-radius: 0 0 var(--radius-md) var(--radius-md);
|
|
}
|
|
}
|
|
.form_f75fb0:has(.channelTextArea__74017:focus-within) {
|
|
--chatbar-border-color: var(--border-subtle);
|
|
}
|
|
.scrollerSpacer__36d07 {
|
|
height: calc(25px + var(--chatbar-padding));
|
|
}
|
|
.scroller__36d07::-webkit-scrollbar-track {
|
|
margin-bottom: calc(21px + var(--chatbar-padding));
|
|
}
|
|
.bottomBar__0f481 {
|
|
margin-bottom: 25px;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* top-bar.css */
|
|
@property --move-top-bar-buttons {
|
|
syntax: 'on | off';
|
|
inherits: false;
|
|
initial-value: on;
|
|
}
|
|
|
|
@container body style(--move-top-bar-buttons: off) {
|
|
.visual-refresh {
|
|
/* remove help button */
|
|
.trailing_c38106 > a[href="https://support.discord.com"],
|
|
.recentsIcon_c99c29,
|
|
.winButtons_c38106::before
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
/* make server list inner scroll */
|
|
.stack_dbd263 {
|
|
overflow: hidden scroll;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
|
|
|
|
}
|
|
}
|
|
@container body style(--move-top-bar-buttons: on) {
|
|
.visual-refresh {
|
|
|
|
/* remove help button */
|
|
.trailing_c38106 > a[href="https://support.discord.com"]
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
/* make server list inner scroll */
|
|
.stack_dbd263 {
|
|
overflow: show;
|
|
scrollbar-width: none;
|
|
}
|
|
/* create space for inbox button */
|
|
.tutorialContainer__1f388 {
|
|
margin-bottom: 1px;
|
|
}
|
|
/* move inbox button*/
|
|
.clickable_c99c29 {
|
|
display: none;
|
|
position: fixed;
|
|
width: 24px;
|
|
height: 24px;
|
|
top: calc(var(--custom-app-top-bar-height) + 1px + var(--custom-guild-list-padding) + 30px);
|
|
left: calc(var(--gap) + 15px + var(--custom-guild-list-padding));
|
|
/*top: calc(var(--custom-app-top-bar-height) + var(--custom-guild-list-padding) + 7px);
|
|
left: calc(var(--gap) + 54px + var(--custom-guild-list-padding));*/
|
|
/*top: calc(var(--custom-app-top-bar-height) + 1px + var(--custom-guild-list-padding) + 38px);*/
|
|
/*left: calc(var(--gap) + 1px + var(--custom-guild-list-padding));*/
|
|
}
|
|
/* style inbox button */
|
|
.clickable_c99c29 .button__85643 {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: var(--background-surface-higher);
|
|
border-radius: var(--radius-md);
|
|
transition: background-color 0.15s ease-out;
|
|
|
|
&:hover {
|
|
background-color: var(--bg-brand);
|
|
|
|
.icon__9293f {
|
|
color: var(--white);
|
|
}
|
|
}
|
|
}
|
|
.clickable_c99c29 .svg__2338f {
|
|
transition: color 0.15s ease-out;
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
/* shift inbox popup panel into view */
|
|
.recentMentionsPopout__95796 {
|
|
transform: translateX(100%);
|
|
}
|
|
/* move top bar title */
|
|
.title_c38106 {
|
|
padding-left: var(--gap);
|
|
justify-content: flex-start;
|
|
}
|
|
.title__85643 {
|
|
gap: 4px;
|
|
}
|
|
/* style top bar title */
|
|
.title__85643 .icon_f34534 {
|
|
width: 16px;
|
|
height: 16px;
|
|
display: none;
|
|
}
|
|
.title__85643 .text-sm\/medium_cf4812 {
|
|
line-height: 90%;
|
|
color: var(--text-muted);
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* fix settings animation transform */
|
|
.layer__960e4.baseLayer__960e4 {
|
|
transform: none !important;
|
|
}
|
|
.layers__960e4 > .layer__960e4.animating__960e4 {
|
|
will-change: opacity;
|
|
}
|
|
|
|
/* unread icon */
|
|
.clickable_c99c29 .iconBadge__9293f {
|
|
--custom-icon-offset: 8px;
|
|
width: 10px;
|
|
height: 10px;
|
|
transition: background 0.15s ease-out;
|
|
}
|
|
|
|
.clickable_c99c29:hover .iconBadge__9293f {
|
|
background: var(--white);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* transparency-blur.css */
|
|
@property --panel-blur {
|
|
syntax: 'off | on';
|
|
inherits: false;
|
|
initial-value: off;
|
|
}
|
|
|
|
@container body style(--panel-blur: on) {
|
|
.visual-refresh {
|
|
#app-mount {
|
|
--panel-backdrop-filter: blur(var(--blur-amount));
|
|
}
|
|
|
|
.popoverReactionHoverBar_f84418 /* message hover quick action bar */,
|
|
.tooltip_c36707 /* tooltips */ {
|
|
background: var(--bg-floating);
|
|
}
|
|
.menu_c1e9c4 /* context menus */,
|
|
.contentWrapper__08434 /* emoji/gif panel */,
|
|
.root__49fc1 /* modals like invite */,
|
|
.outer_c0bea0.user-profile-popout:not(.custom-theme-background) /* small profile popup */,
|
|
.autocomplete__6b0e0 /* autocomplete */,
|
|
.container__55c99 /* search suggestions */,
|
|
.messagesPopoutWrap_e8b59c /* inbox */,
|
|
.popout__76f04 /* channel hover popout */,
|
|
.bar__7aaec /* channel list new unreads bar */ {
|
|
background: var(--bg-floating);
|
|
}
|
|
}
|
|
}
|
|
|
|
@property --transparency-tweaks {
|
|
syntax: 'on | off';
|
|
inherits: false;
|
|
initial-value: off;
|
|
}
|
|
|
|
@container body style(--transparency-tweaks: on) {
|
|
.visual-refresh {
|
|
.formWithLoadedChatInput_f75fb0:before,
|
|
.children__9293f:after {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
@property --remove-bg-layer {
|
|
syntax: 'on | off';
|
|
inherits: false;
|
|
initial-value: off;
|
|
}
|
|
|
|
@container body style(--remove-bg-layer: on) {
|
|
.bg__960e4 {
|
|
background: transparent !important;
|
|
}
|
|
}
|
|
|
|
/* user-panel.css */
|
|
@property --small-user-panel {
|
|
syntax: 'on | off';
|
|
inherits: false;
|
|
initial-value: on;
|
|
}
|
|
|
|
@container body style(--small-user-panel: on) {
|
|
.visual-refresh {
|
|
.base_c48ade {
|
|
grid-template-areas:
|
|
'titleBar titleBar titleBar'
|
|
'guildsList notice notice'
|
|
'guildsList channelsList page'
|
|
'guildsList userPanel page';
|
|
}
|
|
.panels_c48ade {
|
|
max-width: calc(var(--custom-guild-sidebar-width) - var(--custom-guild-list-width));
|
|
}
|
|
}
|
|
}
|
|
|
|
/* window-controls.css */
|
|
@property --custom-window-controls {
|
|
syntax: 'on | off';
|
|
inherits: false;
|
|
initial-value: on;
|
|
}
|
|
|
|
body {
|
|
--window-control-size: 14px;
|
|
}
|
|
|
|
@container body style(--custom-window-controls: on) {
|
|
.winButtons_c38106 {
|
|
gap: 0;
|
|
padding-right: calc(var(--gap) - (var(--window-control-size) / 2) + 1px);
|
|
}
|
|
.winButtons_c38106::before {
|
|
margin-right: calc(var(--custom-app-top-bar-height) / 4);
|
|
}
|
|
.winButton_c38106 > svg {
|
|
display: none;
|
|
}
|
|
.winButton_c38106 {
|
|
background: none !important;
|
|
width: calc(var(--window-control-size) * 2);
|
|
height: var(--custom-app-top-bar-height);
|
|
}
|
|
.winButton_c38106::after {
|
|
display: block;
|
|
content: '';
|
|
height: var(--window-control-size);
|
|
width: var(--window-control-size);
|
|
border-radius: 50%;
|
|
}
|
|
.winButton_c38106:hover::after {
|
|
filter: brightness(0.7);
|
|
}
|
|
.winButton_c38106:active::after {
|
|
transform: scale(0.9);
|
|
}
|
|
.winButtonClose_c38106::after {
|
|
background-color: var(--dnd) !important;
|
|
}
|
|
.winButtonMinMax_c38106:nth-child(1)::after {
|
|
background-color: var(--idle) !important;
|
|
}
|
|
.winButtonMinMax_c38106:nth-child(2)::after {
|
|
background-color: var(--online) !important;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @name Horizontal Server List
|
|
* @author MoonMoon
|
|
* @description Moves the server list from the left to the top of Discord. Originally made by: Gibbu#1211
|
|
*/
|
|
|
|
:root {
|
|
--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 */
|
|
}
|
|
|
|
.content__5e434 {
|
|
margin-top: var(--custom-guild-list-width);
|
|
overflow: visible !important;
|
|
}
|
|
|
|
#app-mount .sidebar__5e434 {
|
|
border-radius: 0;
|
|
overflow: visible !important;
|
|
}
|
|
#app-mount .guilds__5e434 {
|
|
transform-origin: top left;
|
|
rotate: -90deg;
|
|
height: 100vw !important;
|
|
bottom: unset;
|
|
position: absolute !important;
|
|
left: 0;
|
|
}
|
|
#app-mount .tree_ef3116 {
|
|
padding-top: var(--HSL-top-padding, var(--size-sm));
|
|
}
|
|
#app-mount .wrapper_cc5dd2 {
|
|
rotate: 90deg;
|
|
}
|
|
#app-mount .itemsContainer_ef3116,
|
|
#app-mount .stack_dbd263 {
|
|
flex-direction: var(--HSL-server-direction);
|
|
justify-content: var(--HSL-server-alignment);
|
|
}
|
|
|
|
.container__5e434 > div[style]:not(.base__5e434) {
|
|
width: 100vw !important;
|
|
height: var(--custom-guild-list-width) !important;
|
|
position: absolute;
|
|
top: calc(var(--custom-guild-list-width) + var(--custom-app-top-bar-height));
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
.container__5e434 > div[style]:not(.base__5e434) .guilds__5e434 {
|
|
pointer-events: all;
|
|
}
|
|
.container__5e434 > div[style]:not(.base__5e434) + .base__5e434 .content__5e434 {
|
|
margin-top: calc(var(--custom-guild-list-width) * 2);
|
|
}
|
|
|
|
/**
|
|
* @name Discord Ui Tweaks
|
|
* @author Wolfÿ
|
|
* @version 1.0.1-Alpha
|
|
* @description Just a collection of tweaks I created or which I collected that were made by others (I try to mention them in the repo!) that make Discord a little more enjoyable
|
|
* @invite avia
|
|
* @source https://github.com/MEWPASCO/rainbowglow-avatars
|
|
* @website https://www.avariaxyz.win/
|
|
*/
|
|
|
|
/* Rainbow VC Avatars */
|
|
@import url('https://raw.githubusercontent.com/MEWPASCO/rainbowglow-avatars/main/rainbow.css');
|
|
|
|
|
|
/* === Collapse Icon Left (by sakgoyal) === */
|
|
.containerDefault__29444 > div {
|
|
padding-left: 0.5em;
|
|
}
|
|
.containerDefault__29444 > div > div {
|
|
display: flex;
|
|
justify-content: start !important;
|
|
flex-direction: row-reverse !important;
|
|
}
|
|
|
|
/* === Remove Profile Reactions (by LuSaffi) === */
|
|
.avatarPopover__2d0ab,
|
|
.statusPopover__2d0ab,
|
|
.activityPopover__2d0ab {
|
|
display: none;
|
|
}
|
|
|
|
|
|
/* === Unclamp User Bios (by myself) === */
|
|
.descriptionClamp_f5f93a:not(.headerText_faa96b .descriptionClamp_f5f93a) {
|
|
-webkit-line-clamp: unset;
|
|
max-height: 400px;
|
|
}
|
|
.viewFullBio_f5f93a {
|
|
display: none;
|
|
}
|
|
|
|
/* === Revert App-Tags to BOT (by hanyuko + tweak) === */
|
|
span[class*="botTag"]:not([class*="botTagAi"], [class*="botTagCozy"], [class*="botTagRemix"], [class*="botTagOP"]) span[class*="botText"] {
|
|
visibility: hidden;
|
|
position: relative;
|
|
}
|
|
span[class*="botTag"]:not([class*="botTagAi"], [class*="botTagCozy"], [class*="botTagRemix"], [class*="botTagOP"]) span[class*="botText"]::after {
|
|
content: "BOT";
|
|
visibility: visible;
|
|
position: absolute;
|
|
left: 0;
|
|
font-size: 0.625rem;
|
|
}
|
|
|
|
|
|
/* === Bot Forms (by nexpId) === */
|
|
form > div.focusLock__49fc1 > div.rootWithShadow__49fc1 {
|
|
width: var(--modal-width-medium);
|
|
}
|
|
.rootWithShadow__49fc1 .header__49fc1 {
|
|
padding: var(--modal-vertical-padding) var(--modal-horizontal-padding);
|
|
margin-bottom: var(--modal-vertical-padding);
|
|
border-bottom: 1px solid var(--border-normal);
|
|
}
|
|
.header__49fc1 .colorHeaderPrimary_c9946a {
|
|
text-align: center;
|
|
font-weight: var(--font-weight-semibold);
|
|
flex-grow: 1;
|
|
}
|
|
.header__49fc1 .closeButton_e858dd {
|
|
top: unset;
|
|
right: var(--modal-horizontal-padding);
|
|
margin: auto 0;
|
|
}
|
|
.closeButton_e858dd .contents__201d5 {
|
|
height: 24px;
|
|
}
|
|
.submissionWarning_e858dd {
|
|
display: none;
|
|
}
|
|
.formItem__1b11b .eyebrow_b717a1 {
|
|
margin-bottom: 4px;
|
|
}
|
|
.errorMessage_b717a1 {
|
|
color: var(--text-danger);
|
|
}
|
|
.input__0f084.error__0f084:focus {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
/* === GIF Favorites Cleanup (by MadelineMaid) === */
|
|
[class*="gifFavoriteButton_"] {
|
|
background-color: transparent;
|
|
}
|
|
[class*="result_"] [class*="favButton"] {
|
|
right: unset;
|
|
}
|
|
|
|
/* === Remove Chatbox Icons (by Sessh) === */
|
|
/* to change, select one of the "button[aria-label="Select emoji"]" areas and change the text that's inside those " " */
|
|
/*
|
|
Select Emoji - Emoji icon
|
|
Open sticker picker - Sticker icon
|
|
Open GIF picker - GIF icon
|
|
Send a gift - Gift icon
|
|
Apps - Controller icon
|
|
*/
|
|
.visual-refresh button[aria-label="Select emoji"],
|
|
button[aria-label="Open GIF picker"],
|
|
button[aria-label="Send a gift"],
|
|
button[aria-label="Apps"] {
|
|
display: none;
|
|
}
|
|
.visual-refresh .buttons__74017 {
|
|
align-items: center;
|
|
gap: 0.1px;
|
|
}
|
|
|
|
/* === Fullscreen emoji/sticker/gif modal === */
|
|
.layerContainer_da8173 .positionLayer__08434 {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
z-index: 100;
|
|
}
|
|
|
|
.positionLayer__08434 .drawerSizingWrapper__08434 {
|
|
position: absolute;
|
|
top: 50vh;
|
|
left: 50vw;
|
|
transform: translate(-50%, -50%);
|
|
width: 90vw !important;
|
|
height: 90vh;
|
|
}
|
|
|
|
/**
|
|
* @name Unread msg and selected channel snippet
|
|
* @author Amnissya
|
|
* @description Random snippet on gibbu's support server that transforms the unread channel behaviour and current channel behaviour
|
|
*/
|
|
|
|
/*=============================================*/
|
|
/*unread msg*/
|
|
|
|
|
|
/*server*/
|
|
:where(.visual-refresh) .modeUnreadImportant__2ea32 .icon__2ea32, :where(.visual-refresh) .modeUnreadImportant__2ea32:hover .icon__2ea32 {
|
|
color: #cd664c!important;
|
|
}
|
|
|
|
.modeUnreadImportant__2ea32 .name__2ea32 {
|
|
color: #cd664c!important;
|
|
}
|
|
.unreadImportant__2ea32 {
|
|
display: none;
|
|
}
|
|
/*dms*/
|
|
:where(.visual-refresh) .highlighted__20a53 {
|
|
color: #cd664c;
|
|
}
|
|
.unreadPill__972a0 {
|
|
display: none;
|
|
}
|
|
/*=============================================*/
|
|
/*server select read*/
|
|
|
|
/*server*/
|
|
.container__2637a .wrapper__2ea32.modeSelected__2ea32 .name__2ea32, .container__2637a .wrapper__2ea32.modeConnected__2ea32 .name__2ea32 {
|
|
color: #89b482!important;
|
|
}
|
|
.modeSelected__2ea32 .link__2ea32, .modeSelected__2ea32:hover .link__2ea32 {
|
|
background:none;
|
|
}
|
|
.container__2637a .wrapper__2ea32.modeSelected__2ea32 .icon__2ea32, .container__2637a .wrapper__2ea32.modeConnected__2ea32 .icon__2ea32 {
|
|
color: #89b482!important;
|
|
}
|
|
/*dms*/
|
|
:where(.visual-refresh) .interactive__972a0:active, :where(.visual-refresh) .interactiveSelected__972a0 {
|
|
color: #89b482!important;
|
|
background: none;
|
|
|
|
}
|