Discord: Compact layout

compact layout for discord channels, servers left pane
当前为 2025-02-20 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name        Discord: Compact layout
// @description  compact layout for discord channels, servers left pane
// @author      ivan, ffact, some llms
// @namespace   discord_styles
// @include     *://discord.com/*
// @version     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 {
  --servers-sidebar-width: 240px;
}
nav[aria-label="Servers sidebar"] {
  /* Expand the servers sidebar because the text labels need more room */
  width: var(--servers-sidebar-width);
}
div[aria-label="Servers"] > div,
div[aria-label="Servers"] > div[class^="wrapper__"] > div,
div[aria-label="Servers"] > div > ul > div {
  width: unset;
}

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(--servers-sidebar-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(--servers-sidebar-width);
  height: var(--servers-sidebar-width);
  /* Center it so that clicks are not impeded by its circular nature */
  margin-top: calc(-0.5 * var(--servers-sidebar-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;
}
/* 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(--servers-sidebar-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(--servers-sidebar-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(--servers-sidebar-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(--servers-sidebar-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;
}
*/


`);


  /**
   * Script for correcting height of opened folders
   */

(function() {
  'use strict';

  const CONFIG = {
    transitionDuration: '0.2s ease',
    // Adjust this value if needed (currently set to a padding value)
    ulElementBottomPaddingHeight: '7px',
  };

  /**
   * Updates category heights based on their content.
   */
  function updateHeights() {
    const serversContainer = document.querySelector('nav.wrapper_ef3116.guilds_c48ade');
    if (!serversContainer) return;

    serversContainer.querySelectorAll('div.wrapper__48112.isExpanded__48112')
      .forEach(category => {
        const ulElement = category.querySelector('ul[id^="folder-items-"]');
        const ulBottomPadding = category.querySelector('div[class^="folderEndWrapper_"]');
        if (!ulElement) return;

        const serverItems = ulElement.querySelectorAll('div.listItem__650eb');
        if (serverItems.length === 0) return;

        ulElement.style.height = 'unset';
        ulBottomPadding.style.height = CONFIG.ulElementBottomPaddingHeight;
        ulElement.style.transition = CONFIG.transitionDuration;

        const parentScroller = category.closest('div.scroller_ef3116');
        if (parentScroller) {
          parentScroller.style.transition = CONFIG.transitionDuration;
        }
      });
  }

  /**
   * Initializes the MutationObserver for dynamic updates.
   */
  function initObserver() {
    const serversContainer = document.querySelector('nav.wrapper_ef3116.guilds_c48ade');
    if (!serversContainer) {
      setTimeout(initObserver, 1000);
      return;
    }

    new MutationObserver(updateHeights)
      .observe(serversContainer, { attributes: true, childList: true, subtree: true });

    updateHeights(); // Initial update
  }

  /**
   * Checks DOM readiness and initializes the observer.
   */
  function onReady(callback) {
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', callback);
    } else {
      callback();
    }
  }

  onReady(initObserver);
})();
欢迎访问Greasy Fork镜像
