1933 lines
40 KiB
CSS
1933 lines
40 KiB
CSS
/* 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;
|
|
}
|
|
|
|
body {
|
|
container-name: body;
|
|
|
|
/* font, change to '' for default discord font */
|
|
--font: 'figtree';
|
|
|
|
/* sizes */
|
|
--gap: 12px;
|
|
/* spacing between panels */
|
|
--divider-thickness: 4px;
|
|
/* thickness of unread messages divider and highlighted message borders */
|
|
}
|
|
|
|
.visual-refresh {
|
|
/* panel separation */
|
|
.guilds_c48ade
|
|
/* server list */
|
|
,
|
|
.sidebarList_c48ade
|
|
/* channel list (includes dm list) */
|
|
,
|
|
.panels_c48ade
|
|
/* 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 */
|
|
,
|
|
.outer_c0bea0.panel_c0bea0
|
|
/* dm user panel */
|
|
,
|
|
.searchResultsWrap_a9e706
|
|
/* search results */
|
|
,
|
|
.container_f369db
|
|
/* forum */
|
|
,
|
|
.chat_fb64c9
|
|
/* new thread panel */
|
|
,
|
|
.container_a592e1
|
|
|
|
/* server discovery */
|
|
{
|
|
background-color: var(--background-base-lower);
|
|
border-radius: var(--radius-lg);
|
|
border: 1px solid var(--border-subtle);
|
|
backdrop-filter: var(--panel-backdrop-filter);
|
|
}
|
|
|
|
.base_c48ade
|
|
|
|
/* base grid */
|
|
{
|
|
display: grid;
|
|
grid-template-columns: [start] min-content [guildsEnd] min-content [channelsEnd] 1fr [end];
|
|
grid-template-rows: [top] var(--custom-app-top-bar-height) [titleBarEnd] min-content [noticeEnd] 1fr [contentEnd] min-content [end];
|
|
grid-template-areas:
|
|
'titleBar titleBar titleBar'
|
|
'guildsList notice notice'
|
|
'guildsList channelsList page'
|
|
'userPanel userPanel page';
|
|
gap: 0 var(--gap);
|
|
}
|
|
|
|
.panels_c48ade
|
|
|
|
/* user panel */
|
|
{
|
|
width: 100%;
|
|
position: static;
|
|
grid-area: userPanel;
|
|
margin: var(--gap) 0 0 0;
|
|
overflow: hidden;
|
|
max-width: calc(var(--custom-guild-sidebar-width) + var(--gap) + 4px);
|
|
}
|
|
|
|
.sidebar_c48ade
|
|
|
|
/* server list + channel list + user panel group */
|
|
{
|
|
margin: 0 0 var(--gap) var(--gap);
|
|
}
|
|
|
|
.guilds_c48ade
|
|
|
|
/* server list */
|
|
{
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.scroller_ef3116
|
|
|
|
/* server list inner scroller */
|
|
{
|
|
padding-top: var(--custom-guild-list-padding);
|
|
}
|
|
|
|
.container__2637a
|
|
|
|
/* channel list inner */
|
|
{
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.hasBanner_f37cb1 .header_f37cb1
|
|
|
|
/* server name + banner */
|
|
{
|
|
background-color: var(--background-base-lower);
|
|
}
|
|
|
|
.clickable_f37cb1,
|
|
.container__2637a
|
|
/* channel list inner */
|
|
,
|
|
.header_f37cb1
|
|
|
|
/* server name */
|
|
{
|
|
background: none;
|
|
}
|
|
|
|
.sidebar_c48ade:after
|
|
|
|
/* server list + channel list bottom shadow */
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
.chat_f75fb0
|
|
/* chat group outer */
|
|
,
|
|
.container__133bf
|
|
|
|
/* friends page group outer */
|
|
,
|
|
.page_c48ade {
|
|
padding-bottom: var(--gap);
|
|
padding-right: var(--gap);
|
|
border: none !important;
|
|
background: none;
|
|
}
|
|
|
|
.page_c48ade>.chat_f75fb0,
|
|
.page_c48ade>.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;
|
|
}
|
|
|
|
.chatContent_f75fb0
|
|
|
|
/* chat */
|
|
{
|
|
overflow: hidden;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.members_c8ffbb
|
|
/* member list inner */
|
|
,
|
|
.member_c8ffbb
|
|
|
|
/* member list item */
|
|
{
|
|
background: none;
|
|
}
|
|
|
|
.resizeHandle__01ae2
|
|
|
|
/* resize handle */
|
|
{
|
|
background: transparent;
|
|
}
|
|
|
|
.privateChannels__35e86
|
|
/* 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);
|
|
}
|
|
|
|
.outer_c0bea0.panel_c0bea0
|
|
|
|
/* dm user panel */
|
|
{
|
|
margin-left: var(--gap);
|
|
overflow: hidden;
|
|
height: auto;
|
|
min-width: 340px;
|
|
}
|
|
|
|
.searchResultsWrap_a9e706
|
|
|
|
/* search results */
|
|
{
|
|
margin-left: var(--gap);
|
|
}
|
|
|
|
.notice__6e2b9
|
|
|
|
/* notice banner */
|
|
{
|
|
margin: 0 var(--gap) var(--gap) 0;
|
|
border-radius: var(--radius-md);
|
|
}
|
|
|
|
.callContainer_cb9592
|
|
|
|
/* vc container */
|
|
{
|
|
border-radius: var(--radius-lg) !important;
|
|
border: 1px solid var(--border-subtle);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.container__01ae2
|
|
|
|
/* vc chat + titlebar group */
|
|
{
|
|
border: none;
|
|
background: none;
|
|
}
|
|
|
|
.chat_ee72fa::before
|
|
|
|
/* vc chat shadow */
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
.channelChatWrapper_cb9592
|
|
|
|
/* vc chat + titlebar group outer */
|
|
{
|
|
background: none;
|
|
}
|
|
|
|
.page_c48ade>.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);
|
|
}
|
|
|
|
/* 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_d852db
|
|
|
|
/* message loading placeholders */
|
|
,
|
|
.wrapper_d852db>.wrapper_fc8177 {
|
|
background: none;
|
|
}
|
|
|
|
.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 */
|
|
{
|
|
bottom: 12px;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
/* jank ass solution to only apply padding to treatment 3 */
|
|
.form_f75fb0
|
|
|
|
/* chat bar outer form */
|
|
{
|
|
--space-8: 16px;
|
|
}
|
|
|
|
.channelBottomBarArea_f75fb0
|
|
|
|
/* chat bar inner */
|
|
{
|
|
--space-8: 8px;
|
|
}
|
|
|
|
/* get rid of extra space in treatment 2 */
|
|
.accessoryBar__74017 {
|
|
padding-top: 0;
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
|
|
/* 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 */
|
|
{
|
|
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);
|
|
}
|
|
|
|
.root__24502 {
|
|
background: none;
|
|
}
|
|
}
|
|
|
|
body {
|
|
--font-primary: var(--font), 'gg sans';
|
|
--font-display: var(--font), 'gg sans';
|
|
}
|
|
|
|
[class*='scroll'] {
|
|
will-change: scroll-position;
|
|
}
|
|
|
|
.burstGlow__23977 {
|
|
display: none;
|
|
}
|
|
|
|
/* animations.css */
|
|
@property --animations {
|
|
syntax: 'on | off';
|
|
inherits: false;
|
|
initial-value: on;
|
|
}
|
|
|
|
body {
|
|
--list-item-transition: 0.2s ease;
|
|
/* transition for list items */
|
|
--dms-icon-svg-transition: 0.4s ease;
|
|
/* transition for the dms icon */
|
|
}
|
|
|
|
@container body style(--animations: on) {
|
|
.visual-refresh {
|
|
/* list hover animations */
|
|
.wrapper__2ea32 .link__2ea32
|
|
/* channels */
|
|
,
|
|
.container__91a9d
|
|
/* members */
|
|
,
|
|
.channel__972a0
|
|
/* dms */
|
|
,
|
|
.side_b3f026 .item_b3f026
|
|
|
|
/* settings */
|
|
{
|
|
transition: margin-left var(--list-item-transition);
|
|
will-change: margin-left;
|
|
}
|
|
|
|
.wrapper__2ea32:hover .link__2ea32,
|
|
.side_b3f026 .item_b3f026: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 */
|
|
@property --background-image {
|
|
syntax: 'on | off';
|
|
inherits: false;
|
|
initial-value: off;
|
|
}
|
|
|
|
body {
|
|
--background-image-url: url('');
|
|
}
|
|
|
|
@container body style(--background-image: on) {
|
|
.visual-refresh .bg__960e4 {
|
|
background: var(--background-image-url);
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
}
|
|
|
|
/* colors.css */
|
|
@property --colors {
|
|
syntax: 'on | off';
|
|
inherits: false;
|
|
initial-value: on;
|
|
}
|
|
|
|
:root {
|
|
/* text colors */
|
|
--text-0: var(--bg-4);
|
|
/* text on colored elements */
|
|
--text-1: hsl(220, 45%, 95%);
|
|
/* other normally white text */
|
|
--text-2: hsl(220, 25%, 70%);
|
|
/* headings and important text */
|
|
--text-3: hsl(220, 20%, 60%);
|
|
/* normal text */
|
|
--text-4: hsl(220, 15%, 40%);
|
|
/* icon buttons and channels */
|
|
--text-5: hsl(220, 15%, 25%);
|
|
/* 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(220, 15%, 13%);
|
|
/* spacing, secondary elements */
|
|
--bg-4: hsl(220, 15%, 10%);
|
|
/* main background color */
|
|
--hover: hsla(221, 19%, 40%, 0.1);
|
|
/* channels and buttons when hovered */
|
|
--active: hsla(220, 19%, 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(230, 0%, 0%, 0.1);
|
|
/* messages when hovered */
|
|
|
|
/* accent colors */
|
|
--accent-1: var(--blue-1);
|
|
/* links and other accent text */
|
|
--accent-2: var(--blue-2);
|
|
/* small accent elements */
|
|
--accent-3: var(--blue-3);
|
|
/* accent buttons */
|
|
--accent-4: var(--blue-4);
|
|
/* accent buttons when hovered */
|
|
--accent-5: var(--blue-5);
|
|
/* accent buttons when clicked */
|
|
--mention: linear-gradient(to right, color-mix(in hsl, var(--blue-2), transparent 90%) 60%, transparent);
|
|
/* background of messages that mention you */
|
|
--mention-hover: linear-gradient(to right,
|
|
color-mix(in hsl, var(--blue-2), transparent 95%) 60%,
|
|
transparent);
|
|
/* background of messages that mention you when hovered */
|
|
--accent-new: var(--blue-2);
|
|
/* stuff that's normally red like mute/deafen buttons */
|
|
|
|
/* status indicator colors */
|
|
--online: var(--green-2);
|
|
/* change to #44a25b for default green */
|
|
--dnd: var(--red-2);
|
|
/* change to #d83a42 for default red */
|
|
--idle: var(--yellow-2);
|
|
/* change to #c99656 for default yellow */
|
|
--streaming: var(--purple-2);
|
|
/* change to #593695 for default purple */
|
|
--offline: var(--text-4);
|
|
/* change to #83838b for default offline color */
|
|
|
|
/* border colors */
|
|
--border-light: hsl(230, 20%, 40%, 0.1);
|
|
/* light border color */
|
|
--border: hsl(230, 20%, 40%, 0.2);
|
|
/* normal border color */
|
|
--button-border: hsl(0, 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 {
|
|
--activity-card-background: red;
|
|
--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(--bg-2);
|
|
--background-message-highlight-hover: var(--bg-3);
|
|
--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: red;
|
|
--bg-base-secondary: var(--bg-4);
|
|
--bg-base-tertiary: var(--bg-3);
|
|
--background-mod-subtle: var(--bg-3);
|
|
--background-mod-normal: var(--bg-3);
|
|
--background-mod-strong: var(--bg-3);
|
|
--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);
|
|
--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: red;
|
|
--channel-icon: var(--text-3);
|
|
--channels-default: var(--text-4);
|
|
|
|
--header-primary: var(--text-3);
|
|
--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: red;
|
|
--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: red;
|
|
--text-tertiary: var(--text-4);
|
|
|
|
--status-danger: var(--red-2);
|
|
--status-danger-background: var(--red-3);
|
|
--status-danger-text: var(--white);
|
|
--status-dnd: red;
|
|
--status-idle: red;
|
|
--status-offline: red;
|
|
--status-online: red;
|
|
--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-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-0);
|
|
--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);
|
|
}
|
|
|
|
.visual-refresh {
|
|
::placeholder {
|
|
color: var(--text-5);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.folder__48112[aria-expanded="false"]>.folderIconWrapper__48112
|
|
|
|
/* collapsed folders */
|
|
{
|
|
--background-primary: var(--bg-3);
|
|
}
|
|
|
|
.panel__5dec7
|
|
/* game activity panel */
|
|
,
|
|
#vc-spotify-player
|
|
|
|
/* vencord spotify plugin */
|
|
{
|
|
background: none;
|
|
}
|
|
|
|
.side_b3f026 .item_b3f026:hover
|
|
|
|
/* settings tab */
|
|
{
|
|
background-color: var(--bg-3) !important;
|
|
}
|
|
|
|
.side_b3f026 .item_b3f026:active,
|
|
.side_b3f026 .item_b3f026.selected_b3f026 {
|
|
background-color: var(--bg-2) !important;
|
|
}
|
|
|
|
.wrapper_cb9592>.callContainer_cb9592
|
|
|
|
/* dm vc */
|
|
{
|
|
background-color: var(--bg-4);
|
|
}
|
|
|
|
.quickSelectPopout_ebaca5
|
|
/* dm vc region select popout */
|
|
,
|
|
.participantsButton__211d1
|
|
/* vc participants button */
|
|
,
|
|
.voiceBar__7aaec
|
|
/* n in voice bar (channel list) */
|
|
,
|
|
.mainCard_f369db
|
|
|
|
/* form posts */
|
|
{
|
|
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__9a337
|
|
/* 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;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.container__87bf1
|
|
|
|
/* settings checkbutton background */
|
|
{
|
|
background-color: var(--bg-1) !important;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.container__87bf1.checked__87bf1
|
|
|
|
/* settings checkbutton background */
|
|
{
|
|
background-color: var(--accent-2) !important;
|
|
}
|
|
|
|
.container__87bf1 .slider__87bf1>svg>path
|
|
|
|
/* settings checkbutton check */
|
|
{
|
|
fill: var(--bg-1) !important;
|
|
transition: fill 0.2s ease;
|
|
}
|
|
|
|
.container__87bf1.checked__87bf1 .slider__87bf1>svg>path
|
|
|
|
/* settings checkbutton check */
|
|
{
|
|
fill: var(--accent-2) !important;
|
|
}
|
|
|
|
.container__87bf1 rect[fill='white']
|
|
|
|
/* settings checkbutton slider */
|
|
{
|
|
fill: var(--text-3) !important;
|
|
transition: fill 0.2s ease;
|
|
}
|
|
|
|
.container__87bf1.checked__87bf1 rect[fill='white']
|
|
|
|
/* settings checkbutton slider */
|
|
{
|
|
fill: var(--text-0) !important;
|
|
}
|
|
|
|
.refreshIcon__001a7
|
|
|
|
/* 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 */
|
|
{
|
|
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_fcf29c
|
|
/* you have unsaved settings message */
|
|
,
|
|
.friendRequestsButton__523aa .base__2b1f5
|
|
|
|
/* inbox friend request number */
|
|
,
|
|
.textBadge__2b1f5[style='background-color: var(--background-accent);'] {
|
|
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);
|
|
}
|
|
|
|
.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__382e7
|
|
|
|
/* 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);
|
|
}
|
|
|
|
/* status indicators */
|
|
rect[fill='#83838b'] {
|
|
fill: var(--offline);
|
|
}
|
|
|
|
.status_a423bd[style='background-color: rgb(131, 131, 139);'] {
|
|
background-color: var(--offline) !important;
|
|
}
|
|
|
|
rect[fill='#43a25a'] {
|
|
fill: var(--online);
|
|
}
|
|
|
|
.status_a423bd[style='background-color: rgb(68, 162, 91);'] {
|
|
background-color: var(--online) !important;
|
|
}
|
|
|
|
rect[fill='#c99656'] {
|
|
fill: var(--idle);
|
|
}
|
|
|
|
.status_a423bd[style='background-color: rgb(201, 150, 86);'] {
|
|
background-color: var(--idle) !important;
|
|
}
|
|
|
|
rect[fill='#d83a42'] {
|
|
fill: var(--dnd);
|
|
}
|
|
|
|
.status_a423bd[style='background-color: rgb(216, 58, 66);'] {
|
|
background-color: var(--dnd) !important;
|
|
}
|
|
|
|
rect[fill='#593695'] {
|
|
fill: var(--streaming);
|
|
}
|
|
|
|
/* fix radio bar button colors */
|
|
.radioBar__001a7[style='--radio-bar-accent-color: var(--yellow-360); padding: 10px;'] {
|
|
--radio-bar-accent-color: var(--yellow-2) !important;
|
|
}
|
|
|
|
.radioBar__001a7[style='--radio-bar-accent-color: var(--green-360); padding: 10px;'] {
|
|
--radio-bar-accent-color: var(--green-2) !important;
|
|
}
|
|
|
|
.radioBar__001a7[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-new);
|
|
}
|
|
|
|
::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-svg-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg');
|
|
/* icon svg url. MUST BE A 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: cover;
|
|
background-position: var(--dms-background-image-position);
|
|
}
|
|
}
|
|
|
|
@container body style(--dms-background: color) {
|
|
.wrapper__6e9f8[data-list-item-id='guildsnav___home']>.childWrapper__6e9f8 {
|
|
background: var(--dms-background-color);
|
|
}
|
|
}
|
|
|
|
/* top-bar.css */
|
|
@property --move-top-bar-buttons {
|
|
syntax: 'on | off';
|
|
inherits: false;
|
|
initial-value: off;
|
|
}
|
|
|
|
@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: hidden scroll;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
/* create space for inbox button */
|
|
.tutorialContainer__1f388 {
|
|
margin-bottom: 48px;
|
|
}
|
|
|
|
/* move inbox button */
|
|
.recentsIcon_c99c29 {
|
|
position: fixed;
|
|
width: 40px;
|
|
height: 40px;
|
|
top: calc(var(--custom-app-top-bar-height) + 1px + var(--custom-guild-list-padding) + 48px);
|
|
left: calc(var(--gap) + 1px + var(--custom-guild-list-padding));
|
|
}
|
|
|
|
/* style inbox button */
|
|
.recentsIcon_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);
|
|
}
|
|
}
|
|
}
|
|
|
|
.recentsIcon_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 */
|
|
.recentsIcon_c99c29 .iconBadge__9293f {
|
|
--custom-icon-offset: 8px;
|
|
width: 10px;
|
|
height: 10px;
|
|
transition: background 0.15s ease-out;
|
|
}
|
|
|
|
.recentsIcon_c99c29:hover .iconBadge__9293f {
|
|
background: var(--white);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* transparency-blur.css */
|
|
@property --panel-blur {
|
|
syntax: 'on | off';
|
|
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__382e7
|
|
|
|
/* tooltips */
|
|
{
|
|
background: var(--bg-floating);
|
|
}
|
|
|
|
.menu_c1e9c4
|
|
/* context menus */
|
|
,
|
|
.contentWrapper__08434
|
|
/* emoji/gif panel */
|
|
,
|
|
.root__49fc1
|
|
/* modals like invite */
|
|
,
|
|
.outer_c0bea0
|
|
/* small profile popup */
|
|
,
|
|
.autocomplete__6b0e0
|
|
/* autocomplete */
|
|
,
|
|
.container__55c99
|
|
/* search suggestions */
|
|
,
|
|
.messagesPopoutWrap__45690
|
|
/* inbox */
|
|
,
|
|
.popout__76f04
|
|
|
|
/* channel hover popout */
|
|
{
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* user-panel.css */
|
|
@property --small-user-panel {
|
|
syntax: 'on | off';
|
|
inherits: false;
|
|
initial-value: off;
|
|
}
|
|
|
|
@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';
|
|
}
|
|
}
|
|
}
|
|
|
|
/* window-controls.css */
|
|
@property --custom-window-controls {
|
|
syntax: 'on | off';
|
|
inherits: false;
|
|
initial-value: off;
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|