Customizable Discord! ✧･ﾟ☆ by birb-naise

/* ==UserStyle==
@name         Customizable Discord! ✧･ﾟ☆
@namespace    USO Archive
@version      20240417.0
@description  "Simple and customizable style for Discord!"
@author       birb-naise
@license      CC0-1.0
@preprocessor uso

@advanced dropdown bg "Background" {
  noelle "Noelle*" <<<EOT https://i.imgur.com/pWKivE4.jpeg EOT;
  emu "Emu" <<<EOT https://i.imgur.com/tpkDRFf.png EOT;
  aibg "Ai" <<<EOT https://i.imgur.com/KK08VK2.png EOT;
  b "Chiaki" <<<EOT https://i.imgur.com/9rdTjS1.png EOT;
  a "Chika" <<<EOT https://i.imgur.com/XzSxzNH.jpeg EOT;
  bg-custom-dropdown "Custom" <<<EOT /*[[bg-custom]]*\/ EOT;
}
@advanced text bg-custom "Custom Background (Don't use cdn.discordapp.com images ⚠)" "https://i.imgur.com/example.jpg"
@advanced dropdown opacity "Background Opacity" {
  ae "40%*" <<<EOT .6 EOT;
  aa "0%" <<<EOT 1 EOT;
  ab "10%" <<<EOT .9 EOT;
  ac "20%" <<<EOT .8 EOT;
  ad "30%" <<<EOT .7 EOT;
  af "50%" <<<EOT .5 EOT;
  ag "60%" <<<EOT .4 EOT;
  ah "70%" <<<EOT .3 EOT;
  ai "80%" <<<EOT .2 EOT;
  aj "90%" <<<EOT .1 EOT;
  ak "100%" <<<EOT 0 EOT;
}
@advanced text bg-blur "Background Blur" "0"
@advanced color themecolor "Theme Color" #505574

@advanced dropdown icon "Discord Icon" {
  i-default "Default*" <<<EOT https://i.imgur.com/Xyd0svE.png EOT;
  i-sakura "Sakura" <<<EOT https://i.imgur.com/FcgzZ4Z.png EOT;
  i-wham "Wham" <<<EOT https://i.imgur.com/C0r1hTL.png EOT;
  i-fuming "Fuming" <<<EOT https://i.imgur.com/OmiWDzy.png EOT;
  i-holo "Holo" <<<EOT https://i.imgur.com/PcnaSTQ.png EOT;
  i-sunset "Sunset Ave" <<<EOT https://i.imgur.com/2PVWG77.png EOT;
  i-galactic "Galactic Chrome" <<<EOT https://i.imgur.com/OATcKyt.png EOT;
  i-pastel "Pastel" <<<EOT https://i.imgur.com/uNyNp0v.png EOT;
  i-uwu "UwU" <<<EOT https://i.imgur.com/TAZX1mo.png EOT;
  i-prismatic "Prismatic Waves" <<<EOT https://i.imgur.com/V65Erca.png EOT;
  i-d64 "D64" <<<EOT https://i.imgur.com/6zjlbQu.png EOT;
  i-wonderhoy "wonderhoy" <<<EOT https://i.imgur.com/SuNQymM.png EOT;
  i-custom "Custom" <<<EOT /*[[icon-custom]]*\/ EOT;
}

@advanced text icon-custom "Custom Icon" "https://i.imgur.com/example.jpg"
@advanced dropdown font "Font" {
  ggsans "gg sans (Default)*" <<<EOT gg sans EOT;
  arialblack "Arial Black" <<<EOT Arial Black EOT;
  Consolas "Consolas" <<<EOT Consolas EOT;
  cambria "Cambria" <<<EOT Cambria EOT;
  rockwell "Rockwell" <<<EOT Rockwell EOT;
  candara "Candara" <<<EOT Candara EOT;
  centurygothic "Century Gothic" <<<EOT Century Gothic EOT;
  couriernew "Courier New" <<<EOT Courier New EOT;
  arial "Arial" <<<EOT Arial EOT;
  comicsansms "Comic Sans MS" <<<EOT Comic Sans MS EOT;
}
@advanced dropdown theme "Dark/Light Mode" {
  ba "Dark*" <<<EOT
/*------------ DARK MODE COLORS ------------*\/
:root {
    --theme-text: #dcddde;
    --theme-muted: #9d9d9d;
    --theme-bg: rgba(0, 0, 0, .5);
    --theme-popup: rgba(0, 0, 0, .8);
    --theme-bg-dim: rgba(0,0,0, /*[[opacity]]*\/);
}
 EOT;
  bb "Light" <<<EOT
/*------------ LIGHT MODE COLORS ------------*\/
:root {
    --theme-text: #24273d;
    --theme-muted: #4c4f69;
    --theme-bg: rgba(255, 255, 255, .5);
    --theme-popup: rgba(255, 255, 255, .8);
    --theme-bg-dim: rgba(225 ,230, 240, /*[[opacity]]*\/);
}
 EOT;
}


==/UserStyle== */
@-moz-document domain("discord.com") {
/*////////////// BACKGROUND //////////////*/
:root {
    background: url("/*[[bg]]*/");
    background-size: cover;
    --theme-color: /*[[themecolor]]*/;
    --theme-font: "/*[[font]]*/";
}

body {
    background: var(--theme-bg-dim);
    backdrop-filter: blur(/*[[bg-blur]]*/px);
}
    

/*////////////// DARK/LIGHT MODE COLORS //////////////*/
/*[[theme]]*/


/*////////////// BACKGROUND COLORS //////////////*/
.theme-dark,
.theme-light {
    --background-primary: transparent;
    --background-secondary: transparent;
    --background-secondary-alt: transparent;
    --background-tertiary: transparent;
    --background-floating: var(--theme-popup);
    
    --modal-background: var(--theme-bg);
    --modal-footer-background: transparent;
    --input-background: var(--theme-bg);
    --channeltextarea-background: transparent;
    
    --background-modifier-hover: var(--theme-bg);
    --background-modifier-selected: var(--theme-bg);
    
    --elevation-low: transparent;                       /* shadows */
    --primary-630: var(--theme-popup);                    /* Active Now activities --updated 4-17---*/
    --profile-gradient-primary-color: var(--theme-bg);    /* default profile bg */
}
    
    
/*////////////// TEXT //////////////*/
:root{
    --header-primary: var(--theme-text);
    --header-secondary: var(--theme-text);
    --text-normal: var(--theme-text);
    --text-muted: var(--theme-muted);
    
    --channels-default: var(--theme-muted);
    --interactive-normal: var(--theme-muted);
    --interactive-hover: var(--theme-text);
    --interactive-active: var(--theme-text);
    --interactive-muted: var(--theme-muted);
}
    

/*////////////// POP-UP //////////////*/
[role=dialog] > div:not([class^="userPopout"]),     /* general pop-ups (-profiles) */
div[class^="topicsDropdown"] > div,                 /* summaries pop-up */
div[class^="topicsPillContainer"]                   /* summaries bar */
{
    background: var(--theme-popup) !important;
}


/*////////////// THEME COLOR //////////////*/
.theme-dark,
.theme-light {
    --text-link: var(--theme-color);
    --text-brand: var(--theme-color);
    --brand-experiment: var(--theme-color);
    --brand-experiment-560: var(--theme-color);   /* option press bg */
    --brand-experiment-600: var(--theme-color);
    --button-secondary-background: var(--theme-color);
    --status-danger: var(--theme-color);          /* ping counter / new mentions */
    --background-accent: var(--theme-color);      /* You're viewing older messages */
}

    
/*////////////// DISCORD DM LOGO //////////////*/
svg[width="30"] {
    color: transparent;
}
nav div[aria-label="Direct Messages"],
nav div[aria-label="Direct Messages"] > div,
nav div[aria-label="Direct Messages"] > div:hover,
nav div[aria-label="Direct Messages"][class*="selected"] > div {
    background-size: cover !important;
    background-image: url("/*[[icon]]*/");
}
    

/*////////////// FONT //////////////*/
body {
    --font-primary: var(--theme-font), "gg sans","Noto Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    --font-display: var(--theme-font), "gg sans","Noto Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
}
    

/*////////////// MISC FIXES //////////////*/
/* push summary divider above label */
div[class^="summary"] {
	padding-top: 1rem;
}

}