Skip to content

Instantly share code, notes, and snippets.

@sjelfull
Forked from dennisfrank/discord-custom.css
Created February 13, 2019 15:07
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save sjelfull/233b876896b228b33831b78cb9ffa88b to your computer and use it in GitHub Desktop.
Custom Discord styles
:root {
--channel-nav-item-height: 1.5rem;
--message-max-width: 50rem;
--theme-light-message-color: #23262a;
--avatar-border-radius: 3px;
--server-border-radius: 8px;
--sidebar-width: 180px;
--breakpoint: 1100px;
}
/* System font */
#app-mount,
#app-mount textarea {
font-family: -apple-system, BlinkMacSystemFont, Helvetica !important;
}
/* Message content width */
@media (min-width: 1100px) {
[class*="containerCozy-"] [class*="contentCozy-"] {
max-width: var(--message-max-width);
}
}
/* Light theme text color */
.theme-light [class*="containerCozy-"] [class*="contentCozy-"] [class*="markup-"] {
color: var(--theme-light-message-color) !important;
}
/* Avatar */
[class*="avatar-"] [class*="image-"] {
border-radius: var(--avatar-border-radius) !important;
}
/* Sidebar widths */
[class*="channels-"] {
width: var(--sidebar-width);
transition: width .1s ease-out;
}
/* Hide sidebar */
@media (max-width: 1100px) {
[class*="channels-"] {
width: 0;
}
[class*="guildsWrapper"]:hover + div > :nth-child(2) > [class*="channels-"],
[class*="channels-"]:hover {
position: relative;
width: var(--sidebar-width);
}
/* Invisible area besides sidebar */
[class*="channels-"]::after {
content: "";
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
left: 100%;
width: 3rem;
}
}
/* Sidebar items */
[class*="channels-"] [class*="wrapper-"] {
height: calc(var(--channel-nav-item-height) + 2px);
overflow: visible;
}
[class*="channels-"] [class*="content-"] {
height: var(--channel-nav-item-height);
}
[class*="channels-"] [class*="name-"] {
line-height: var(--channel-nav-item-height);
font-size: .9rem;
}
/* Server icons */
[class*="systemPad-"] [class*="guildInner"] {
border-radius: var(--server-border-radius) !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment