Fluent Theme for Discord w/Mica (Dorion)

Fluent.theme.css

/**
 * @name Fluent
 * @author Gibbu
 * @version 1.0.10
 * @description Brings the look of Windows 11 to Discord.
 * @source https://github.com/DiscordStyles/Fluent
 * @invite ZHthyCw
 * @authorId 174868361040232448
*/

@import url('https://discordstyles.github.io/Fluent/Fluent.css');

:root {
  /*--accent: 88,101,242; /* The colour used throughout the app | R,G,B format | Default: 98, 205, 254 */
  --accent: lch(from var(--os-accent-color) l c calc(h + 180)); /*var(--os-accent-color, rgb(88,101,242));*/
  --accent-text: lch(from var(--os-accent-color) calc(l + 100) c h);
  --channels-width: 300px; /* Size of the server channel/dms list | Default: 300px */
  --members-width: 280px; /* Size of the members list | Default: 280px */
  --server-size: 48px; /* Size of each server in the server list | Default: 48px */
  --dark-background-hue: 0; /* The hue of the background colour. | Options: 0 to 360 | Default: 0 */
  --dark-background-saturation: 0%; /* How much of the colour should be visible. | Must end in a % | Default: 0% */
}

/* Fluent fixes */
/* #app-mount .layer_d4b6c5 ~ .layer_d4b6c5 .sidebar__02e8d .header__71a82 {
  display: block;
} */

/* nav.wrapper__216eb.guilds__2b93a + div:has(> nav) + .base_c0676e .content__76dcf {
    width: calc(100vw - var(--server-container) - var(--server-container));
}

.content__76dcf {
    transition: width 0.1s cubic-bezier(.44,1.04,1,1.01) !important;
} */

.charCounterAdded-zz9O4t {
    width: -webkit-fill-available;
}

:root {
	--rounded: 6px;
	--rounded-high: 12px;
	--bg-main: transparent;
	--bg-alt: #fafafa6e;
	--bg-interactive-high: #bfbfbf38;
	--bg-interactive-high-hover: #e3e3e39c;
	--chat-bubble-bg: #ffffff;
	--background-tertiary: transparent;
    --interactive-muted: #939393;
	--btn-bg-hover: hsl(0 0% 0% / 0.045);
	--btn-bg-active: hsl(0 0% 100% / 0.6);
	--bg-overlay-3: var(--bg-content-alt);
	--bg-overlay-4: var(--bg-high);
	/*--bg-overlay-app-frame: transparent;*/
}

.theme-dark {
	--bg-main: transparent;
	--bg-alt: #2f31361c;
	--bg-interactive-normal: #40444b1c;
	--bg-interactive-normal-hover: #4a4d5429;
	--bg-interactive-high: #4f545c5c;
	--bg-interactive-high-hover: #72767d1a;
	--chat-bubble-bg: #333437;
	/*--bg-overlay-app-frame: #2f3136;*/
}

/* #app-mount .layer_f7d46a.baseLayer__2b890:has(+ .layer_f7d46a:not(.baseLayer__2b890)) {
	display: none;
} */

/* MAIN PANEL */
#app-mount .chat_a7d72e {
	border-left: 1px solid var(--border-mid);
    border-top-left-radius: var(--rounded-high);
}

/* CHANNELS SIDEBAR */
#app-mount .sidebar_a4d4d9 {
	border: none;
}

/*
#app-mount .menu__088f7 {
	box-shadow: var(--elevation-medium);
}
*/
/* MESSAGE INPUT BOX */
#app-mount .scrollableContainer_d0696b {
	background: var(--chat-bubble-bg);
}

/* Equicord channel typing indicator */
.vc-typing-indicator-dots svg {
	background: none;
}

.icon__67ab4 {
	mask-image: url("data:image/svg+xml; utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M10.55 2.532a2.25 2.25 0 0 1 2.9 0l6.75 5.692c.507.428.8 1.057.8 1.72v9.803a1.75 1.75 0 0 1-1.75 1.75h-3.5a1.75 1.75 0 0 1-1.75-1.75v-5.5a.25.25 0 0 0-.25-.25h-3.5a.25.25 0 0 0-.25.25v5.5a1.75 1.75 0 0 1-1.75 1.75h-3.5A1.75 1.75 0 0 1 3 19.747V9.944c0-.663.293-1.292.8-1.72l6.75-5.692Zm1.933 1.147a.75.75 0 0 0-.966 0L4.767 9.37a.75.75 0 0 0-.267.573v9.803c0 .138.112.25.25.25h3.5a.25.25 0 0 0 .25-.25v-5.5c0-.967.784-1.75 1.75-1.75h3.5c.966 0 1.75.783 1.75 1.75v5.5c0 .138.112.25.25.25h3.5a.25.25 0 0 0 .25-.25V9.944a.75.75 0 0 0-.267-.573l-6.75-5.692Z' /></svg>");
}

.link_ddbb36._hiddenChannel_1v3y7_1 .iconContainer__6a580:has(path[d^="M16 4h.5v-.5a2.5 2.5 0 0 1 5 0V4h.5a1"])::before, .link_ddbb36._hiddenChannel_1v3y7_1 .iconContainer__6a580:has(path[d^="M13 4C13 3.66767 13.0405"])::before, .link_ddbb36._hiddenChannel_1v3y7_1 .iconContainer__6a580:has(path[d^="M22.545 4.87988V5.87988H23.28C23.4126"])::before, .link_ddbb36._hiddenChannel_1v3y7_1 .iconContainer__6a580:has(path[d^="M15.44 6.99992C15.5725 6.99992"])::before {
	background: var(--status-danger-background);
}

/* #app-mount .mentioned_fa6fd2 {
	background: unset;
	opacity: unset; /* Remove the opacity *//*
}

#app-mount .mentioned_fa6fd2:after {
	content: '';
    background: var(--chat-mention-colour);
    opacity: 0.05;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
} */

#app-mount div:has(> #vc-friendcount) {
	padding-bottom: 4px;
	height: auto !important;
}

#app-mount .searchBar_e0840f {
	border-radius: var(--rounded) !important;
	background: var(--bg-overlay-4);
}

#app-mount .scrollableContainer_d0696b .button_dd4f85 path {
	display: auto;
}


/* Better user area */
#app-mount .panels_a4d4d9 > .container_b2ca13 .nameTag_b2ca13 {
	display: block;
    padding-top: initial;
    padding-bottom: initial;
}

/* Fix received messages panel */
#app-mount .container_f1c3d9 {
	background: var(--bg-overlay-4);
}

/* Fix icons with black box */
.button_df39bd .lottieIcon_f73ef7 g {
	display: inherit;
}

.button_df39bd .lottieIcon_f73ef7 svg {
	background: transparent;
}

/* Fix quick switcher background */
#app-mount .quickswitcher_f4e139 {
	background: var(--bg-overlay-4);
}