Add mobile/small screen support, and other tweaks
Discord Tweaks by coffee
Imported and mirrored from https://raw.githubusercontent.com/coffeebank/coffee-userstyles/master/discord-tweaks/style.user.css
Details
Authorcoffee
LicenseMIT
Categorydiscord
Created
Updated
Size3.0 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
- Sidebar shrinks to reduce distractions
- Channels list shrinks
- Voice call members shown when shrunk
- Threads, Pinned, etc. popups right-aligned
- Members list shrinks
- Reduced buttons for non-nitro: Gift, Stickers
Discord hide gift button, hide sticker button, Discord responsive small screen sizes, mobile responsive, Discord mobile browser
Source code
/* ==UserStyle==
@name Discord Tweaks
@description Add mobile/small screen support, and other tweaks
@namespace https://github.com/coffeebank/
@homepageURL https://github.com/coffeebank/
@version 1.1.2
@license MIT
@preprocessor default
==/UserStyle== */
@-moz-document domain("discord.com") {
:root {
--serverSidebarWidth: 50px;
--serverSidebarExpand: 240px;
--memberSidebarWidth: 65px;
--memberSidebarExpand: 260px;
}
/* spacing (hide your server list on screenshots) */
div[aria-label="Servers"] {
margin-bottom: 125vh;
}
/* nitro cleanup */
button[aria-label="Send a gift"], button[aria-label="Open sticker picker"], div[aria-label="Help"] {
display: none;
}
@media screen and (max-width: 684px) {
/* servers and channels */
/* shrink serverlist to reduce distractions */
nav[aria-label="Servers sidebar"] {
margin-left: -2.5rem;
}
div[class*="content"] > div[class*="sidebar"] {
width: var(--serverSidebarWidth);
}
nav[aria-label="Servers sidebar"], div[class*="content"] > div[class*="sidebar"] {
transition: all 150ms ease;
transition-delay: 0.1s;
}
nav[aria-label="Servers sidebar"]:hover {
margin-left: 0px;
}
nav[aria-label="Servers sidebar"]:hover ~ div[class*="content"] > div[class*="sidebar"], div[class*="content"] > div[class*="sidebar"]:hover {
width: var(--serverSidebarExpand);
}
div[class*="list"][class*="listDefault"][role="group"] { /* voice users */
padding-left: 6px;
}
.container-1ov-mD { /* main chat area - fix width of embeds */
overflow-x: auto;
overflow-y: hidden;
}
/* members list */
aside[class*="membersWrap"][class*="hiddenMembers"] {
transition: all 0.15s ease;
transition-delay: 0.1s;
width: var(--memberSidebarWidth);
min-width: var(--memberSidebarWidth);
overflow: hidden;
justify-content: left;
}
aside[class*="membersWrap"]:hover {
width: var(--memberSidebarExpand);
}
/* top bar */
section[aria-label="Channel header"] {
flex-wrap: wrap;
height: 5.25rem;
}
section[aria-label="Channel header"] div div[role="switch"] {
margin: 0 !important;
}
div[aria-label="Search"] {
width: calc(100vw - 260px) !important;
}
section[aria-label="Search Results"] {
width: 100%;
border-left: darkslategray solid thin;
border-top-left-radius: 5px;
}
/* popouts */
div[id*="popout_"][style*="position"] {
right: 1rem !important;
}
}
}