lestroisvengers.theme.V3.css

/**
 * @name Troisvengers V3
 * @author NAN
 * @version 7.0.1+fusion
 * @description Thème hautement personnalisable pour Vencord, revisité avec les teintes et arrière-plans du thème lestroispilierstrois.
 * @source https://github.com/ClearVision/ClearVision-v7
 */

/* IMPORT CSS */
@import url("https://clearvision.github.io/ClearVision-v7/main.css");
@import url("https://clearvision.github.io/ClearVision-v7/vencord.css");

/* SETTINGS */
:root {
  /* ACCENT COLORS */
  --main-color: #00FFC3; /* main accent color (hex, rgb or hsl) [default: #e67a27] */
  --hover-color: #00D3A1; /* hover accent color (hex, rgb or hsl) [default: #b35d1e] */
  --success-color: #00FFC3; /* positive accent color (hex, rgb or hsl) [default: #43b581] */
  --danger-color: #FF0000; /* danger accent color (hex, rgb or hsl) [default: #982929] */
  --url-color: #00FFC3; /* url accent color (hex, rgb or hsl) [default: var(--main-color)] */
  
  /* STATUS COLORS */
  --online-color: #00FF8E; /* online status color (hex, rgb or hsl) [default: #43b581] */
  --idle-color: #FF9F00; /* idle status color (hex, rgb or hsl) [default: #faa61a] */
  --dnd-color: #FF0000; /* dnd status color (hex, rgb or hsl) [default: #982929] */
  --streaming-color: #5E00FF; /* streaming status color (hex, rgb or hsl) [default: #593695] */
  --offline-color: #808080; /* offline/invisible status color (hex, rgb or hsl) [default: #808080] */
  
  /* APP BACKGROUND */
  --background-shading-percent: 73%; /* app background shading amount (0 for complete smoothness) [default: 100%] */
  --background-image: url('https://i.imgur.com/MOEjVFo.png'); /* app background image (link must be HTTPS) [default: url(https://clearvision.github.io/images/amber.jpg)]*/
  --background-position: center; /* app background position [default: center] */
  --background-size: cover; /* app background size (px) [default: cover] */
  --background-attachment: fixed; /* app background attachment [default: fixed] */
  --background-brightness: 100%; /* app background brightness [default: 100%] */
  --background-contrast: 100%; /* app background contrast [default: 100%] */
  --background-saturation: 100%; /* app background saturation [default: 100%] */
  --background-grayscale: 0%; /* app background grayscale [default: 0%] */
  --background-invert: 0%; /* app background invert [default: 0%] */
  --background-blur: 0px; /* app background blur [default: 0px] */
  --background-overlay: rgba(0,0,0,0.6); /* app background overlay [default: transparent] */
  --background-filter: brightness(var(--background-brightness)) contrast(var(--background-contrast)) saturate(var(--background-saturation)) grayscale(var(--background-grayscale)) invert(var(--background-invert)) blur(var(--background-blur)); /* app background adjustments (ex: blur, saturation, brightness) (more info: https://developer.mozilla.org/en-US/docs/Web/CSS/filter) [default: saturate(calc(var(--saturation-factor, 1) * 1))] */
  
  /* USER POPOUT BACKGROUND */
  --user-popout-image: url('https://i.imgur.com/MOEjVFo.png'); /* user popout background image (link must be HTTPS) (not applied to nitro users) [default: var(--background-image)] */
  --user-popout-position: center; /* user popout position [default: var(--background-position)] */
  --user-popout-size: cover; /* user popout size (px) [default: var(--background-size)] */
  --user-popout-attachment: fixed; /* user popout background attachment [default: var(--background-attachment)] */
  --user-popout-brightness: 50%; /* user popout brightness [default: 100%] */
  --user-popout-contrast: 100%; /* user popout contrast [default: 100%] */
  --user-popout-saturation: 100%; /* user popout saturation [default: 100%] */
  --user-popout-grayscale: 0%; /* user popout grayscale [default: 0%] */
  --user-popout-invert: 0%; /* user popout invert [default: 0%] */
  --user-popout-blur: 3px; /* user popout blur [default: 0px] */
  --user-popout-filter: brightness(var(--user-popout-brightness)) contrast(var(--user-popout-contrast)) saturate(var(--user-popout-saturation)) grayscale(var(--user-popout-grayscale)) invert(var(--user-popout-invert)) blur(var(--user-popout-blur)); /* user popout background adjustments (ex: blur, saturation, brightness) (more info: https://developer.mozilla.org/en-US/docs/Web/CSS/filter) [default: var(--background-filter);] */
  
  /* USER MODAL BACKGROUND */
  --user-modal-image: url('https://i.imgur.com/MOEjVFo.png'); /* user modal background image (link must be HTTPS) (not applied to nitro users) [default: var(--background-image)] */
  --user-modal-position: center; /* user modal position [default: var(--background-position)] */
  --user-modal-size: cover; /* user modal size (px) [default: var(--background-size)] */
  --user-modal-attachment: fixed; /* user modal background attachment [default: var(--background-attachment)] */
  --user-modal-brightness: 50%; /* user modal brightness [default: 100%] */
  --user-modal-contrast: 100%; /* user modal contrast [default: 100%] */
  --user-modal-saturation: 100%; /* user modal saturation [default: 100%] */
  --user-modal-grayscale: 0%; /* user modal grayscale [default: 0%] */
  --user-modal-invert: 0%; /* user modal invert [default: 0%] */
  --user-modal-blur: 3px; /* user modal blur [default: 0px] */
  --user-modal-filter: brightness(var(--user-modal-brightness)) contrast(var(--user-modal-contrast)) saturate(var(--user-modal-saturation)) grayscale(var(--user-modal-grayscale)) invert(var(--user-modal-invert)) blur(var(--user-modal-blur)); /* user modal background adjustments (ex: blur, saturation, brightness) (more info: https://developer.mozilla.org/en-US/docs/Web/CSS/filter) [default: var(--background-filter);] */
  
  /* HOME ICON */
  --home-icon: url('https://i.imgur.com/57GuK20.png'); /* home button icon (link must be HTTPS) [default: url(https://clearvision.github.io/icons/discord.svg)]*/
  --home-position: center; /* home button position [default: center] */
  --home-size: 40px; /* home button icon size (px) [default:cover] */
  
  
  /* CHANNEL COLORS */
  --channel-normal: rgb(0,255,164,1); /* channel text color [default: var(--interactive-normal)] */
  --channel-muted: rgb(23,105,88,); /* muted channel text color [default: var(--interactive-muted)] */
  --channel-hover: #FFFFFF; /* hovered channel text color [default: var(--interactive-hover)] */
  --channel-selected: var(--interactive-active); /* selected channel text color [default: var(--interactive-active)] */
  --channel-selected-bg: rgb(0,255,195,0.2); /* selected channel background [default: var(--main-color)] */
  --channel-unread: #00FFCA; /* unread channel text color [default: var(--main-color)] */
  --channel-unread-hover: var(--hover-color); /* unread channel hover color [default: var(--hover-color)] */
  
  /* FONTS */
  --main-font: "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif; /* main font for app (font must be installed) [default: gg sans, Helvetica Neue, Helvetica, Arial, sans-serif] */
  --code-font: Consolas, "gg mono", "Liberation Mono", Menlo, Courier, monospace; /* font for codeblocks (font must be installed) [default: Consolas, Liberation Mono, Menlo, Courier, monospace] */
  /* LAYOUT WIDTHS */
  --channels-width: 220px; /* channels list width [default: 220px] */
  --members-width: 240px; /* members list width [default: 240px] */
  
  /* BACKDROP SETTINGS */
  --backdrop-overlay: rgba(0,0,0,0.8); /* backdrop overlay color [default: rgba(0,0,0,0.8)] */
  --backdrop-image: var(--background-image); /* backdrop image [default: var(--background-image)] */
  --backdrop-position: var(--background-position); /* backdrop position [default: var(--background-position)] */
  --backdrop-size: var(--background-size); /* backdrop size [default: var(--background-size)] */
  --backdrop-repeat: var(--background-repeat); /* backdrop repeat [default: var(--background-repeat)] */
  --backdrop-attachment: var(--background-attachment); /* backdrop attachment [default: var(--background-attachment)] */
  --backdrop-brightness: var(--background-brightness); /* backdrop brightness [default: var(--background-brightness)] */
  --backdrop-contrast: var(--background-contrast); /* backdrop contrast [default: var(--background-contrast)] */
  --backdrop-saturation: var(--background-saturation); /* backdrop saturation [default: var(--background-saturation)] */
  --backdrop-invert: var(--background-invert); /* backdrop invert [default: var(--background-invert)] */
  --backdrop-grayscale: var(--background-grayscale); /* backdrop grayscale [default: var(--background-grayscale)] */
  --backdrop-sepia: var(--background-sepia); /* backdrop sepia [default: var(--background-sepia)] */
  --backdrop-blur: var(--background-blur); /* backdrop blur [default: var(--background-blur)] */
  /* ACCESSIBILITY */
  --focus-color: var(--main-color); /* outline when pressing TAB key [default: var(--main-color)] */
  
  /* BETTERDISCORD COMPATIBILITY */
  --bd-blue: var(--main-color); /* betterdiscord blue color [default: var(--main-color)] */
  --bd-blue-hover: var(--hover-color); /* betterdiscord blue hover color [default: var(--hover-color)] */
  --bd-blue-active: var(--hover-color); /* betterdiscord blue active color [default: var(--hover-color)] */
}

/* THEME SPECIFIC SHADING */
/* LIGHT THEME */
:is(.theme-light, .theme-dark .theme-light) {
  --background-shading: rgba(252, 252, 252, 0.3); /* app background shading color [default: rgba(252, 252, 252, 0.3)] */
  --card-shading: rgba(252, 252, 252, 0.3); /* cards background shading color [default: rgba(252, 252, 252, 0.3)] */
  --popout-shading: rgba(252, 252, 252, 0.7); /* popouts background shading color [default: rgba(252, 252, 252, 0.7)] */
  --modal-shading: rgba(252, 252, 252, 0.5); /* modals background shading color [default: rgba(0, 0, 0, 0.6)] */
  --input-shading: rgba(0, 0, 0, 0.3); /* inputs background shading color [default: rgba(0, 0, 0, 0.6)] */
  --normal-text: #36363c; /* text color [default: #36363c] */
  --muted-text: #75757e; /* muted text color [default: #75757e] */
}

/* ASH THEME */
:is(.theme-dark, .theme-light .theme-dark) {
  --background-shading: rgba(0, 0, 0, 0.4); /* app background shading color [default: rgba(0, 0, 0, 0.4)] */
  --card-shading: rgba(0, 0, 0, 0.2); /* cards background shading color [default: rgba(0, 0, 0, 0.2)] */
  --popout-shading: rgba(0, 0, 0, 0.6); /* popouts background shading color [default: rgba(0, 0, 0, 0.6)] */
  --modal-shading: rgba(0, 0, 0, 0.4); /* modals background shading color [default: rgba(0, 0, 0, 0.4)] */
  --input-shading: rgba(255, 255, 255, 0.05); /* inputs background shading color [default: rgba(255, 255, 255, 0.05)] */
  --normal-text: #d8d8db; /* text color [default: #d8d8db] */
  --muted-text: #aeaeb4; /* muted text color [default: #aeaeb4] */
}

/* DARK THEME */
:is(.theme-darker, .theme-light .theme-darker) {
  --background-shading: rgba(0, 0, 0, 0.6); /* app background shading color [default: rgba(0, 0, 0, 0.6)] */
  --card-shading: rgba(0, 0, 0, 0.3); /* cards background shading color [default: rgba(0, 0, 0, 0.3)] */
  --popout-shading: rgba(0, 0, 0, 0.7); /* popouts background shading color [default: rgba(0, 0, 0, 0.7)] */
  --modal-shading: rgba(0, 0, 0, 0.5); /* modals background shading color [default: rgba(0, 0, 0, 0.6)] */
  --input-shading: rgba(255, 255, 255, 0.05); /* inputs background shading color [default: rgba(255, 255, 255, 0.05)] */
  --normal-text: #fbfbfb; /* text color [default: #fbfbfb] */
  --muted-text: #94949c; /* muted text color [default: #94949c] */
}

/* ONYX THEME */
:is(.theme-midnight, .theme-light .theme-midnight) {
  --background-shading: rgba(0, 0, 0, 0.8); /* app background shading color [default: rgba(0, 0, 0, 0.8)] */
  --card-shading: rgba(0, 0, 0, 0.4); /* cards background shading color [default: rgba(0, 0, 0, 0.4)] */
  --popout-shading: rgba(0, 0, 0, 0.8); /* popouts background shading color [default: rgba(0, 0, 0, 0.8)] */
  --modal-shading: rgba(0, 0, 0, 0.6); /* modals background shading color [default: rgba(0, 0, 0, 0.6)] */
  --input-shading: rgba(255, 255, 255, 0.05); /* inputs background shading color [default: rgba(255, 255, 255, 0.05)] */
  --normal-text: #dcdcde; /* text color [default: #dcdcde] */
  --muted-text: #86868e; /* muted text color [default: #86868e] */
}

/* ADDITIONAL CSS BELOW THIS LINE */
/* PERFORMANCE OPTIMIZATIONS */
:root {
  /* Évite les repaints liés au fixed */
  --background-attachment: scroll;
  --backdrop-attachment: scroll;
  --user-popout-attachment: scroll;
  --user-modal-attachment: scroll;

  /* Coupe tous les filtres pour meilleures performances */
  --background-filter: none;
  --user-popout-filter: none;
  --user-modal-filter: none;
}

/* Neutralise tout backdrop/filter résiduel */
#app-mount::before,
#app-mount::after,
[class*="backdrop"],
[class*="popout"],
[class*="modal"] {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
}

/* Option: réduit fortement les animations (si micro-freezes persistants) */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}