Server-list Drawer [Fixed] by freeplay
Imported and mirrored from https://codeberg.org/Freeplay/UserStyles/raw/branch/main/discord_server-list-drawer.user.css
![Server-list Drawer [Fixed] screenshot](https://userstyles.world/preview/81/0.jpeg)
Details
Authorfreeplay
LicenseNo License
Created
Updated
CategoryDiscord
Statistics
Learn how we calculate statistics in the FAQ.
Total views
Total installs
Weekly installs
Weekly updates
Description
A server-list drawer for Discord!
Notes
Userstyle doesn't have notes.Source code
/* ==UserStyle==
@name Discord - Server-List Drawer
@version 1.0.6
@description A server-list drawer for Discord.
-- AUTHOR STUFF --
@namespace Freeplay
@author Freeplay (https://freeplay.codeberg.page/)
@homepageURL https://codeberg.org/Freeplay/UserStyles
@supportURL https://codeberg.org/Freeplay/UserStyles/issues
==/UserStyle== */
@-moz-document domain("discord.com") {
/**
* @name Server-list Drawer
* @author Freeplay#5676
* @version 1.0.6
* @description A server-list drawer for Discord!
* @authorId 158296466119458816
* @source https://github.com/Freeplayg/discord-serverlist-drawer
**/
/* 1.0.6
- Forgot about DM's oopsies
*/
[class*="wrapper-"][class*="guilds-"] {
position: fixed;
z-index: 20;
left: -72px;
bottom: 0;
top: 0;
transition: left .1s, margin-left .3s, width .15s !important;
margin-top: 48px;
background-color: var(--background-secondary-alt) !important;
}
.platform-win [class*="wrapper-"][class*="guilds-"] {
top: 22px !important;
}
.reduce-motion [class*="wrapper-"][class*="guilds-"],
.reduce-motion [class*="wrapper-"][class*="guilds-"]::before {
transition: opacity .1s !important;
}
[class*="wrapper-"][class*="guilds-"]::before {
content: attr(aria-label);
position: fixed;
margin-top: -48px;
height: 48px;
line-height: 48px;
background-color: var(--background-secondary-alt);
/* z-index: 100; */
width: 240px;
box-shadow: var(--elevation-low);
padding-left: 60px;
z-index: 21;
pointer-events: none;
box-sizing: border-box;
text-transform: capitalize;
font-weight: 600;
color: var(--header-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: left .1s, margin-left .3s, width .15s !important;
left: -74px;
width: 72px;
}
[class*="wrapper-"][class*="guilds-"]:hover,
[class*="wrapper-"][class*="guilds-"]:focus,
[class*="wrapper-"][class*="guilds-"]:focus-within {
left: 5px;
margin-left: -5px;
width: 240px;
}
[class*="wrapper-"][class*="guilds-"]:hover:before,
[class*="wrapper-"][class*="guilds-"]:focus:before,
[class*="wrapper-"][class*="guilds-"]:focus-within:before {
left: 5px;
margin-left: -5px;
width: 240px;
line-height: 48px;
}
[class*="wrapper-"][class*="guilds-"] [class*="scroller-"] {
padding-top: 5px !important;
background-color: var(--background-secondary-alt) !important;
display: flex;
flex-direction: column;
contain: unset !important;
}
[class*="wrapper-"][class*="guilds-"] .none-2Eo-qx::-webkit-scrollbar {
width: 8px;
height: 8px;
}
[class*="wrapper-"][class*="guilds-"] .none-2Eo-qx::-webkit-scrollbar-thumb {
background-clip: padding-box;
border: 2px solid transparent;
border-radius: 4px;
background-color: var(--background-tertiary);
min-height: 40px;
}
[class*="wrapper-"][class*="guilds-"] [class*="unreadMentionsIndicator"] {
width: unset !important;
/* left: unset !important; */
}
[class*="wrapper-"][class*="guilds-"] [class*="unreadMentionsIndicator"] [class*="bar-"] {
width: 62px;
margin: auto;
}
[class*="wrapper-"][class*="guilds-"] [class*="tutorialContainer-"]:first-child [class*="listItemWrapper-"] {
position: fixed;
z-index: 22;
margin-top: -52px;
left: 0;
width: 60px;
background: none !important;
}
[class*="wrapper-"][class*="guilds-"] [class*="tutorialContainer-"]:first-child [class*="listItemWrapper-"] [class*="wrapper"],
[class*="wrapper-"][class*="guilds-"] [class*="tutorialContainer-"]:first-child [class*="listItemWrapper-"] [class*="wrapper"] svg {
margin: 0;
width: 48px;
height: 48px;
}
[class*="wrapper-"][class*="guilds-"] [class*="tutorialContainer-"]:first-child [class*="listItemWrapper-"] [class*="wrapper"] [class*="homeIcon-"] {
/* padding: 6px; */
/* padding-bottom: 7px; */
padding-left: 17px;
padding-right: 4px;
padding-bottom: 0px;
}
[class*="wrapper-"][class*="guilds-"] [class*="tutorialContainer-"]:first-child [class*="listItemWrapper-"] [class*="wrapper"] [class*="lowerBadge-"] {
bottom: 6.5px;
right: -4px;
box-shadow: 0 0 0 3px var(--background-secondary);
border-radius: 100%;
}
[class*="wrapper-"][class*="guilds-"] [class*="tutorialContainer-"]:first-child [class*="listItemWrapper-"] [class*="wrapper"] [class*="childWrapper-"] {
background: none !important;
}
[class*="wrapper-"][class*="guilds-"] [class*="tutorialContainer-"]:first-child [class*="pill-"] {
position: fixed;
top: 1px;
z-index: 22;
}
[class*="wrapper-"][class*="guilds-"] [class*="tutorialContainer-"]:first-child + [class*="listItem-"] + div[aria-label] {
margin-bottom: 10px;
}
[class*="wrapper-"][class*="guilds-"] [class*="listItem-"] {
width: 100%;
justify-content: flex-start;
}
/* Attempt at an unread messages indicator. */
[class*="wrapper-"][class*="guilds-"] [class*="tutorialContainer-"] + div[style*="transform: scale(1);"] {
transform: unset !important;
}
[class*="wrapper-"][class*="guilds-"] .unread:not(.selected)::before,
[class*="wrapper-"][class*="guilds-"] .mentioned:not(.selected)::before,
[class*="wrapper-"][class*="guilds-"] [class*="tutorialContainer-"] + div[style*="transform: scale(1);"]::before {
content: "";
transform: scale(0);
position: fixed;
top: 25px;
left: 35px;
width: 13px;
height: 13px;
background-color: white;
border-radius: 100%;
border: 2px solid var(--background-secondary);
z-index: 101;
pointer-events: none;
transition: transform .1s;
}
[class*="wrapper-"][class*="guilds-"]:not(:hover) .unread:not(.selected)::before,
[class*="wrapper-"][class*="guilds-"]:not(:hover) .mentioned:not(.selected)::before,
[class*="wrapper-"][class*="guilds-"]:not(:hover) [class*="tutorialContainer-"] + div[style*="transform: scale(1);"]::before {
transform: scale(1);
}
[class*="wrapper-"][class*="guilds-"] .mentioned:not(.selected)::before,
[class*="wrapper-"][class*="guilds-"] [class*="tutorialContainer-"] + div[style*="transform: scale(1);"]::before {
background-color: rgb(240, 71, 71) !important;
z-index: 102;
}
[class*="wrapper-"][class*="guilds-"] [class*="listItem-"] [class*="childWrapper-"] {
border-radius: 15px !important;
}
[class*="wrapper-"][class*="guilds-"] [class*="listItem-"] [class*="blobContainer"] > div,
[class*="wrapper-"][class*="guilds-"] [class*="listItem-"] [class*="pill"] + [class*="listItemWrapper"] > div,
[class*="wrapper-"][class*="guilds-"] [class*="listItem-"] [data-dnd-name] > div,
[class*="wrapper-"][class*="guilds-"] [class*="listItem-"] [class*="placeholderMask-"],
[class*="wrapper-"][class*="guilds-"] [class*="scroller-"] > [class*="tutorialContainer-"]
{
margin-inline: 12px;
border-radius: 15px;
overflow: visible !important;
}
[class*="wrapper-"][class*="guilds-"] [class*="wrapper"] foreignObject {
overflow: visible !important;
mask: none !important;
}
[class*="wrapper-"][class*="guilds-"] [class*="wrapper"] foreignObject img {
border-radius: 15px;
}
/* This version will include ", folder" at the end of folder names, */
[class*="wrapper-"][class*="guilds-"] [class*="wrapper-"]:not([data-list-item-id="guildsnav___home"]):after,
[class*="wrapper-"][class*="guilds-"] [class*="folder-"]::before {
content: attr(aria-label);
position: absolute;
left: 62px;
top: 0;
height: 48px;
line-height: 48px;
margin-left: 4px;
width: 150px;
overflow: hidden;
color: var(--interactive-hover);
font-weight: 600;
font-size: 16px;
text-overflow: ellipsis;
white-space: nowrap;
pointer-events: none;
}
/* For Discord clients that support data-guild-name in listitem elements
(Powercord, not sure about others), covers up version above */
[class*="wrapper-"][class*="guilds-"] [class*="listItem-"][data-guild-name]::after,
[class*="wrapper-"][class*="guilds-"] [class*="wrapper-"][data-folder-name]::after {
content: attr(data-guild-name);
position: absolute;
/* flex-grow: 1; */
left: 100%;
width: 155px;
color: var(--interactive-hover);
font-weight: 600;
font-size: 16px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
pointer-events: none;
line-height: 48px;
height: 48px;
margin-left: 6.57px;
padding-right: 10px;
box-sizing: border-box;
background-color: var(--background-secondary-alt);
z-index: 2;
}
[class*="wrapper-"][class*="guilds-"] [class*="wrapper-"][data-folder-name]::after {
content: attr(data-folder-name);
}
[class*="wrapper-"][class*="guilds-"] [class*="expandedFolderBackground-"], [class*="guilds-"] [class*="folder-"] {
background-color: var(--background-primary);
border-radius: 15px;
}
[class*="wrapper-"][class*="guilds-"] [class*="guildSeparator-"] {
width: 100%;
margin: 0px 18px !important;
display: flex !important;
height: 0px;
opacity: 0;
transition: margin .5s, height .5s, opacity .3s;
}
[class*="wrapper-"][class*="guilds-"] div[style="opacity: 1; height: 56px; transform: scale(1);"] + [class*="listItem-"] > [class*="guildSeparator-"] {
display: flex !important;
margin: 8px 18px !important;
height: 2px;
opacity: 1;
}
[class*="wrapper-"][class*="guilds-"] [class*="scroller-"] > [class*="tutorialContainer-"]:not(:first-of-type) foreignObject,
[class*="wrapper-"][class*="guilds-"] [class*="scroller-"] > [class*="listItem-"] foreignObject {
overflow: visible !important;
mask: unset !important;
width: 215px !important;
}
[class*="wrapper-"][class*="guilds-"] [class*="circleIconButton-"] {
width: 100%;
border-radius: 4px;
justify-content: flex-start;
padding-left: 16px;
}
[class*="wrapper-"][class*="guilds-"] [class*="circleIconButton-"]::after {
content: attr(aria-label);
position: relative;
margin-left: 14px;
margin-bottom: -1px;
/* left: 100%; */
}
[class*="listItemTooltip-"] {
margin-left: -25px;
background-color: var(--background-secondary-alt) !important;
}
[class*="listItemTooltip-"] [class*="tooltipPointer-"] {
display: none !important;
}
.base-3dtUhz {
left: 0 !important;
}
nav > div > header, [class*="privateChannels"] > [class*="searchBar-"], [class*="discoverHeader"],
[class*="notice-"] {
padding-left: 58px !important;
margin-left: 0 !important;
}
[class*="notice-"] > [class*="back-"] {
left: 62px;
}
[class*="notice-"] + [class*="content-"] .header-2V-4Sw,
[class*="notice-"] + [class*="content-"] .searchBar-6Kv8R2,
[class*="notice-"] + [class*="content-"] [class*="discoverHeader"] {
padding-left: 16px !important;
}
}