Discord theme

discord.theme.css

/**
 * @name adydetra
 * @author adydetra + ClearVision Team
 * @description Highly customizable theme.
**/

@import url("https://gist.githubusercontent.com/adydetra/896d69ff248779438000c9e9572a2dcd/raw/19382b6ed6bc4e1e83fd2bae0270e29d12c81dcf/ClearVision.theme.css");

/* SETTINGS */
:root {
  /* ACCENT COLORS */
  --main-color: #ffffff79; /* main accent color (hex, rgb or hsl) [default: #2780e6] */
  --hover-color: #1e63b3; /* hover accent color (hex, rgb or hsl) [default: #1e63b3] */
  --success-color: #43b581; /* success accent color (hex, rgb or hsl) [default: #43b581] */
  --danger-color: #982929; /* danger accent color (hex, rgb or hsl) [default: #982929] */
  --url-color: #7eabff; /*The color of url links [default: var(--main-color)]*/

  /* STATUS COLORS */
  --online-color: #43b581; /* online status color (hex, rgb or hsl) [default: #43b581] */
  --idle-color: #faa61a; /* idle status color (hex, rgb or hsl) [default: #faa61a] */
  --dnd-color: #982929; /* dnd status color (hex, rgb or hsl) [default: #982929] */
  --streaming-color: #593695; /* streaming status color (hex, rgb or hsl) [default: #593695] */
  --offline-color: #808080; /* offline/invisible status color (hex, rgb or hsl) [default: #808080] */

  /* GENERAL */
  --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, Liberation Mono, Menlo, Courier, monospace; /* font for codeblocks (font must be installed) [default: Consolas, Liberation Mono, Menlo, Courier, monospace] */
  --text-normal: rgb(220, 221, 222); /* color of default discord text */
  --text-muted: rgb(114, 118, 125); /* color of default discord muted text (e.g.text found in input fields before typing).*/
  --channels-width: 220px; /* channel list width (240px for Discord default) [default: 220px] */
  --members-width: 240px; /* member list width [default: 240px] */

  /* APP BACKGROUND */
  --background-shading: 100%; /* app background shading (0 for complete smoothness) [default: 100%] */
  --background-overlay: rgba(0, 0, 0, 0.85); /* app background overlay color/gradient [default: rgba(0, 0, 0, 0.6)] */
  --background-image: url(https://images6.alphacoders.com/113/1138791.jpg); /* app background image (link must be HTTPS) [default: url(https://clearvision.github.io/images/sapphire.jpg)]*/
  --background-position: center; /* app background position [default: center] */
  --background-size: cover; /* app background size [default: cover] */
  --background-repeat: no-repeat; /* app background repeat [default: no-repeat] */
  --background-attachment: fixed; /* app background attachment [default: fixed] */
  --background-brightness: 100%; /* app background brightness (< 100% for darken, > 100% for lighten) [default: 100%] */
  --background-contrast: 100%; /* app background contrast [default: 100%] */
  --background-saturation: 100%; /* app background saturation [default: 100%] */
  --background-invert: 0%; /* app background invert (0 - 100%)  [default: 0%] */
  --background-grayscale: 0%; /* app background grayscale ( 0 - 100%) [default: 0%] */
  --background-sepia: 0%; /* app background sepia (0 - 100%) [default: 0%] */
  --background-blur: 0px; /* app background blur [default: 0px] */

  /* HOME BUTTON ICON */
  --home-icon: url(https://clearvision.github.io/icons/discord.svg); /* home button icon (link must be HTTPS) [default: url(https://clearvision.github.io/icons/discord.svg)]*/
  --home-position: center; /* home button icon position [default: center] */
  --home-size: 30px; /* home button icon size [default: 40px] */

  /* CHANNEL COLORS */
  --channel-unread: #7eabff; /* Unread Server channel color. [default:  var(--main-color)] THIS OVERRIDES YOUR MAIN COLOR*/
  --channel-color: rgba(255, 255, 255, 0.589); /*Read Server channel color  [default: rgba(255,255,255,0.3);]*/
  --channel-text-selected: #fff; /* Selected channel text color, CV default is #fff */
  --muted-color: rgba(255, 255, 255, 0.226); /*Muted channel color  [default: rgba(255,255,255,0.1);]*/

  /* MODAL BACKDROP */
  --backdrop-overlay: rgba(0, 0, 0, 0.8); /* modal backdrop overlay color/gradient [default: rgba(0, 0, 0, 0.8)] */
  --backdrop-image: var(--background-image); /* modal backdrop image (link must be HTTPS) [default: var(--background-image)] */
  --backdrop-position: var(--background-position); /* modal backdrop position [default: var(--background-position)] */
  --backdrop-size: var(--background-size); /* modal backdrop size [default: var(--background-size)] */
  --backdrop-repeat: var(--background-repeat); /* modal backdrop repeat [default: var(--background-repeat)] */
  --backdrop-attachment: var(--background-attachment); /* modal backdrop attachment [default: var(--background-attachment)] */
  --backdrop-brightness: var(--background-brightness); /* modal backdrop brightness (< 100% for darken, > 100% for lighten) [default: var(--background-brightness)] */
  --backdrop-contrast: var(--background-contrast); /* modal backdrop contrast [default: var(--background-contrast)] */
  --backdrop-saturation: var(--background-saturation); /* modal backdrop saturation [default: var(--background-saturation)] */
  --backdrop-invert: var(--background-invert); /* modal backdrop invert (0 - 100%)  [default: var(--background-invert)] */
  --backdrop-grayscale: var(--background-grayscale); /* modal backdrop grayscale ( 0 - 100%) [default: var(--background-grayscale)] */
  --backdrop-sepia: var(--background-sepia); /* modal backdrop sepia (0 - 100%) [default: var(--background-sepia)] */
  --backdrop-blur: var(--background-blur); /* modal backdrop blur [default: var(--background-blur)] */

  /* USER POPOUT BACKGROUND */
  --user-popout-image: var(--background-image); /* app background image (link must be HTTPS) [default: var(--background-image)] */
  --user-popout-position: var(--background-position); /* user popout background position [default: var(--background-position)] */
  --user-popout-size: var(--background-size); /* user popout background size [default: var(--background-size)] */
  --user-popout-repeat: var(--background-repeat); /* user popout background repeat [default: var(--background-repeat)] */
  --user-popout-attachment: var(--background-attachment); /* user popout background attachment [default: var(--background-attachment)] */
  --user-popout-brightness: var(
    --background-brightness
  ); /* user popout background brightness (< 100% for darken, > 100% for lighten) [default: var(--background-brightness)] */
  --user-popout-contrast: var(--background-contrast); /* user popout background contrast [default: var(--background-contrast)] */
  --user-popout-saturation: var(--background-saturation); /* user popout background saturation [default: var(--background-saturation)] */
  --user-popout-invert: var(--background-invert); /* user popout background invert (0 - 100%) [default: var(--background-invert)] */
  --user-popout-grayscale: var(--background-grayscale); /* user popout background grayscale (0 - 100%) [default: var(--background-grayscale)] */
  --user-popout-sepia: var(--background-sepia); /* user popout background sepia (0 - 100%) [default: var(--background-sepia)] */
  --user-popout-blur: calc(var(--background-blur) + 3px); /* user popout background blur [default: calc(var(--background-blur) + 3px)] */
  --user-popout-overlay: rgba(0, 0, 0, 0.6); /* user popout overlay color [default: rgba(0, 0, 0, .6)] */

  /* USER MODAL BACKGROUND */
  --user-modal-image: var(--background-image); /* app background image (link must be HTTPS) [default: var(--background-image)] */
  --user-modal-position: var(--background-position); /* user modal background position [default: var(--background-position)] */
  --user-modal-size: var(--background-size); /* user modal background size [default: var(--background-size)] */
  --user-modal-repeat: var(--background-repeat); /* user modal background repeat [default: var(--background-repeat)] */
  --user-modal-attachment: var(--background-attachment); /* user modal background attachment [default: var(--background-attachment)] */
  --user-modal-brightness: var(--background-brightness); /* user modal background brightness (< 100% for darken, > 100% for lighten) [default: var(--background-brightness)] */
  --user-modal-contrast: var(--background-contrast); /* user modal background contrast [default: var(--background-contrast)] */
  --user-modal-saturation: var(--background-saturation); /* user modal background saturation [default: var(--background-saturation)] */
  --user-modal-invert: var(--background-invert); /* user modal background invert (0 - 100%) [default: var(--background-invert)] */
  --user-modal-grayscale: var(--background-grayscale); /* user modal background grayscale (0 - 100%) [default: var(--background-grayscale)] */
  --user-modal-sepia: var(--background-sepia); /* user modal background sepia (0 - 100%) [default: var(--background-sepia)] */
  --user-modal-blur: calc(var(--background-blur) + 3px); /* user modal background blur [default: calc(var(--background-blur) + 3px)] */

  /* THEME BD COLORS */
  --bd-blue: var(--main-color); /* betterdiscord main color [default: var(--main-color)] */
  --bd-blue-hover: var(--hover-color); /* betterdiscord hover color [default: var(--hover-color)] */
  --bd-blue-active: var(--hover-color); /* betterdiscord active color [default: var(--hover-color)] */
}

/*** adydetra custom start ***/

/* top corner title */
div[class^="wordmarkWindows"] svg {
  display: none;
}

/* window controls */
div[class^="typeWindows"] {
  height: 18px;
}
div[class^="winButton"] svg {
  display: none;
}
div[class^="winButton"] {
  background: none !important;
  top: 0;
  width: 20px;
  height: 20px;
  margin: 1px 4px 0px 0px;
}
div[class^="winButton"]::after {
  content: "";
  height: 12px;
  width: 12px;
  border-radius: 12px;
}
div[class^="winButton"]:hover::after {
  filter: brightness(1);
}
div[class^="winButton"]:active::after {
  transform: scale(0.9);
}
div[class^="winButtonClose"]::after {
  background-color: hsl(350, 50%, 50%) !important;
}
div[class^="winButtonMinMax"]:nth-child(3)::after {
  background-color: hsl(150, 50%, 50%) !important;
}
div[class^="winButtonMinMax"]:nth-child(4)::after {
  background-color: hsl(50, 50%, 50%) !important;
}
/* .typeWindows__5fa63 > .wordmark__0d178:before {
  content: "";
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  text-shadow: 0 0 3px #000;
} */
/* .typeWindows__5fa63 > .wordmark__0d178:after {
  content: "xixixi";
  color: rgba(255, 255, 255, 0.3);
  font-family: var(--code-font);
  font-size: 10px;
} */

/* left side */
.guilds__2b93a {
  margin: 15px 0 15px 15px;
  border-radius: 10px;
  padding: 0.7rem 0;
}
.listItemWrapper__1f93b {
  margin: 0 0 0.5rem 0;
}
.guildSeparator_dcb3cc {
  margin: 0.5rem 0;
}

/* indicator */
.modeSelected__487d6 .numberBadge__50328,
.modeSelected__487d6 .textBadge__45d79,
.interactiveSelected_ec846b .numberBadge__50328,
.interactiveSelected_ec846b .textBadge__45d79,
.selected__5711d .numberBadge__50328,
.selected__5711d .textBadge__45d79 {
  background: #f23f42 !important;
  box-shadow: none;
}

/* server icon */
.wrapper_ed1dea img,
.iconInactive__90d40,
.icon__0cbed {
  filter: blur(2px);
  border-radius: 50%;
}
.selected__98d51 img {
  filter: blur(0);
  border-radius: 50%;
}
.iconInactive__90d40:hover,
.icon__0cbed:hover {
  filter: blur(0) !important;
}

/* left side 2 */
.sidebar_ded4b5 {
  width: 20rem;
  background: transparent;
}
.platform-win .sidebar_ded4b5 {
  border-radius: 10px;
  margin: 15px;
}
.container__590e2,
.container_ca50b9,
.privateChannels__93473 {
  background: rgba(0, 0, 0, calc(var(--background-shading) * 0.3)) !important;
  border-radius: 10px;
}
.bannerImage__39c51,
.bannerImage__39c51 img {
  width: 100% !important;
}
.menu_dc52c6 {
  width: 300px;
}
.panels__58331 {
  margin: 15px 0 0 0;
  border-radius: 10px;
}
.button__66e8c.buttonColor_a6eb73 {
  background-color: #424242 !important;
  color: #dddddd !important;
}
.button__66e8c.buttonColor_a6eb73:hover {
  background-color: #5e5e5e !important;
}
.button__66e8c.buttonColor_a6eb73.buttonActive__407a7 {
  background-color: #6a99fd !important;
  color: #dddddd !important;
}
.unread__48cf4 {
  display: block !important;
  background-color: #9cbcff !important;
}
.modeUnreadImportant_efb53e .name__8d1ec {
  color: #9cbcff  !important;
}


/* profile user */
.tabBarContainer__63f55 {
  padding: 0px;
  border-color: rgba(255, 255, 255, 0.04);
}
.tabBar__35f81 .item__48dda:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* background: linear-gradient(to top, transparent, hsla(0deg, 0%, 100%, 0.07) 50%); */
  border-radius: 3px 3px 0 0;
  opacity: 0;
  transition: all 0.15s ease-in-out, bottom 0.2s ease-in-out;
  z-index: -1;
}
.tabBar__35f81 .item__48dda:after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  bottom: 0;
  left: 0;
  /* background: rgba(0, 0, 0, 0.25); */
  border-radius: 3px 3px 0 0;
  transition: all 0.2s ease-in-out;
  z-index: -1;
}

/* content */
.chatContainer__23434 span {
  line-height: 1.8;
}
.editor__66464 span {
  line-height: 1.4 !important;
}
.emojiContainer__4a804 {
  line-height: 1.3 !important;
}

/* others */
.modeSelected__487d6 .link__95dc0,
.content__764ce .itemFilled__373d7[aria-checked="true"] {
  background-color: #4e4e4e !important;
}

/* adydetra stop */