compact layout for discord channels, servers left pane
当前为
// ==UserScript==
// @name Discord: Compact layout
// @description compact layout for discord channels, servers left pane
// @author ivan, ffact
// @namespace discord_styles
// @include *://discord.com/*
// @version 1.1
// @grant GM_addStyle
// ==/UserScript==
const SmolBase64Image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAABVElEQVQ4jcWQsU6UURCFv7n//XcNa0JDgU+goo0VofIBeAtaggXJxtbOoBFKCYkvYWOsSAyVjwAJdJoYQ1DYhZ07M9cCQsiGEP7KU86cc+bLwP+WAHzYfPelWHl5Y4SIKMinxMXGcPjm150FG+/f/lxbfTWfUrpeqE7YP9if7O19O1YtdSqCNPJ1uP56JQPkJp+IyPx4PLq2pZR48vhp/9nC80fTV2utbO98XAKQrbXlH6Te3Mxg0NZap723Y4swHo0Kob+ze/BicakOHs6ScktuH9D0+rS9Pk1vBiThpnhRrChuSnXj/Oy0ft/9TPZwRn//uKnShWByce4eQXYP3K2alU4F7lbdnexRMdOQlDoVmGt4VHK442aIdCQoRlwSBKYFEO6ZRwRMC1c/cMwKVeR+6Su5FdzjkqAUpdKtwIri4eTw4PDwSJvcnnUk0PDodPRW/QMHss1jW7beUQAAAABJRU5ErkJggg=='
GM_addStyle(`
/* Make text darker on light Discord */
.theme-light {
--text-normal: #000;
}
/* Make background darker on dark Discord, make text darker */
.theme-dark {
--background-primary: #111111;
--background-secondary: #1a1b1f;
--channeltextarea-background: #242527;
--text-normal: #adadad; /* messages */
--interactive-active: #d5d5d5; /* channel names */
--header-primary: #d5d5d5; /* usernames */
}
/* Fix font-family */
:root {
--font-primary: sans-serif !important;
--font-display: sans-serif !important;;
--font-headline: sans-serif !important;;
--font-code: monospace !important;;
}
/* Reduce the font sizes slightly */
div[id^="message-content-"],
div[class^="channelName-"],
span[class^="username-"] {
font-size: 11pt;
}
div[id^="message-content-"] code,
div[id^="message-content-"] code.inline {
font-size: 12px;
}
/* Remove bold font-weight on 1.0 pixel scaling */
@media (-webkit-max-device-pixel-ratio: 1) {
.theme-light {
font-weight: inherit;
}
}
/**
* Replace server icons in sidebar with text labels
*/
:root {
--custom-guild-list-width: 240px;
}
nav[aria-label="Servers sidebar"] {
/* Expand the servers sidebar because the text labels need more room */
width: var(--custom-guild-list-width);
}
div[aria-label="Servers"] > div,
div[aria-label="Servers"] > div > ul > div {
width: unset;
}
/** new folders from update have hardcoded values idk what's the problem + dont care */
div[aria-label=Servers] > div > div > div > div {
width: unset !important;
height: 20px !important;
}
div[aria-label="Servers"] > div[class^="listItem__"] > div[class^="pill_"],
div[aria-label="Servers"] > div > ul > div > div[class^="pill_"] {
/**
* Fix the height of the indicator pills on the left edge.
* We cannot display: none them because
* 1) we have no other way of indicating the active server. CSS4 :has is not yet implemented.
* 2) Discord relies on the pills for the drag-to-arrange to work.
*/
height: 26px;
/* Make the pills less bright */
opacity: 0.55;
}
/* i'm probably tripping but pills for folders have different align */
div[aria-label="Servers"] > div[class^="wrapper__"] > div > div[class^="pill_"] {
height: 24px;
/* Make the pills less bright */
opacity: 0.55;
}
/* The pilled (selected) server will have "40px" in the style when selected.
* Use this information to set a background color for the selected server.
*
* :has isn't supported in any browser yet :(
*/
/*div[aria-label="Servers"] > div:has(> div[aria-hidden="true"] > span[style*="40px"]) {
background-color: #ffffff22;
}*/
div[aria-label="Servers"] > div > div > div[data-dnd-name][draggable="true"] > div,
div[aria-label="Servers"] > div > ul > div > div > div[data-dnd-name][draggable="true"] > div {
/* Constrain width so that the badges don't run into the very right edge of the servers sidebar */
width: calc(var(--custom-guild-list-width) - 20px);
height: 20px;
overflow: hidden;
}
div[aria-label="Servers"] > div > div > div[data-dnd-name][draggable="true"] > div > svg,
div[aria-label="Servers"] > div > ul > div > div > div[data-dnd-name][draggable="true"] > div > svg {
/* Discord is insane and has the click handler inside the animated SVG icon for the server.
* We need to make the SVG big so that clicking anywhere in the apparent rectangle lands your click inside the SVG. */
width: var(--custom-guild-list-width);
height: var(--custom-guild-list-width);
/* Center it so that clicks are not impeded by its circular nature */
margin-top: calc(-0.5 * var(--custom-guild-list-width));
/* We can't even set visibility: hidden, that breaks the click handler.
* If you need to debug, set opacity above 0. */
opacity: 0.0;
}
/** patch for new folders */
div[aria-label=Servers] > div > div > div > div {
width: calc(var(--custom-guild-list-width) - 20px) !important;
height: 20px !important;
}
/* Add the text labels. */
div[aria-label="Servers"] > div > div > div[data-dnd-name][draggable="true"]::before ,
div[aria-label="Servers"] > div > ul > div > div > div[data-dnd-name][draggable="true"]::before {
color: var(--text-normal);
content: attr(data-dnd-name);
white-space: nowrap;
position: absolute;
left: 16px;
top: 5px;
font-size: 11pt;
/* Constrain the width to avoid running into the new message count badge */
width: calc(var(--custom-guild-list-width) - 57px);
overflow-x: hidden;
/* Need to set a height to avoid a scrollbar after using overflow-x
* Use a height large enough to not cut off glyph shapes below the baseline
* (update) adjusted cuz added the folder image*/
height: 15pt;
/* Don't handle click events; pass clicks through to the svg below. */
pointer-events: none;
}
/* fix expanded folder background and set rounded corners */
div[aria-label="Servers"] > div > span {
width: calc(var(--custom-guild-list-width) - 20px);
border-radius: 6px;
}
/* set expanded folder bottom padding */
div[aria-label="Servers"] > div [class^="wrapper__"] > div[class^="folderEndWrapper_"] {
height: 7px;
}
/* add folder icon */
div[aria-label="Servers"] > div[class^="wrapper__"] > div > div[data-dnd-name][draggable="true"]::before {
color: var(--text-normal);
content: url('${SmolBase64Image}') " " attr(data-dnd-name); /* Combine image and text */
white-space: nowrap;
position: absolute;
left: 16px;
top: 2px;
font-size: 11pt;
/* Constrain the width to avoid running into the new message count badge */
width: calc(var(--custom-guild-list-width) - 57px);
overflow-x: hidden;
/* Need to set a height to avoid a scrollbar after using overflow-x
* Use a height large enough to not cut off glyph shapes below the baseline */
height: 15pt;
/* Don't handle click events; pass clicks through to the svg below. */
pointer-events: none;
}
/*
div[aria-label="Servers"] > div[class^="wrapper__"] > div > div[data-dnd-name][draggable="true"]::after {
color: var(--text-normal);
content: '';
white-space: nowrap;
position: absolute;
left: 16px;
top: 2px;
font-size: 11pt;
width: calc(var(--custom-guild-list-width) - 57px);
overflow-x: hidden;
height: 15pt;
pointer-events: none;
background: linear-gradient(
to left,
rgba(227, 229, 232, 1) 0%,
rgba(227, 229, 232, 0) 40px
);
background-clip: padding-box;
padding-left: 0px;
}
*/
/* expanded folder background fix */
ul[id^="folder-items"] {
height: unset !important;
}
div[class^="folderEndWrapper_"] {
height: 7px !important;
}
/* fixes for the new sidebar and new centering of icons */
div[class^="listItem"] {
justify-content: left;
}
body {
--custom-guild-sidebar-width: 500px !important;
}
div[class^="sidebar_"]{
width: var(--custom-guild-sidebar-width) !important;
}
/* also paddings for DM add server etc */
.visual-refresh .svg_cc5dd2{top:-4px;left:4px}
`);