Discord Classic Style

A twist on Discord's Visual Refresh layout, in order to make it look more classic.
目前为 2025-03-31 提交的版本。查看最新版本。
Wrap lines
// ==UserScript==
// @name            Discord Classic Style
// @name:es         Estilo Clásico para Discord
// @namespace       ds.js.discord
// @author          DragShot
// @oujs:author     TheDragShot
// @icon            https://favicone.com/discordapp.com?s=32
// @description     A twist on Discord's Visual Refresh layout, in order to make it look more classic.
// @description:es  Un giro en la interfaz Visual Refresh de Discord, para hacerla verse más clásica.
// @released        2021-06-26
// @updated         2025-03-31
// @lastchanges     Updated the positioning of the user panel and the chat box.
// @copyright       2025, DragShot Software
// @homepageURL     https://dragshot.webcindario.com/software/discordcs.php
// @license         GPL-3.0-only
// @include         *discord.com/*
// @version         2.1.0
// @grant           none
// ==/UserScript==
 
// Discord Classic Style
// Copyright (C) 2025 DragShot Software
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License version 3, as
// published by the Free Software Foundation.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
//Helper functions
function addCSS(css) {
  var head = document.head || document.getElementsByTagName('head')[0],
      style = document.createElement('style');
  style.type = 'text/css';
  if (style.styleSheet){
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
  head.appendChild(style);
}
//Styles
addCSS(`
/* Hide title bar, push notifications down */
 
* {
  --custom-app-top-bar-height: 0px !important;
}
 
/*@supports (grid-template-columns:subgrid) and (white-space-collapse:collapse) {
  [class^='container'] > [class^='base']:has(> [class^='bar']) {
    grid-template-rows: [top] 0px [titleBarEnd] min-content [noticeEnd] 1fr [end];
  }
}*/
 
[class^='base'] > [class^='bar'] {
  overflow: visible;
  min-height: 0px;
  height: var(--custom-app-top-bar-height);
  justify-content: end;
}
 
[class^='base'] > [class^='bar'] > :not([class^='trailing']) {
  display: none;
}
 
[class^='base'] > [class^='bar'] > [class^='trailing'] {
  margin-top: 48px;
  margin-right: -4px;
  z-index: 500;
}
 
/* Server/Channel list color and offsets */
 
[class^='base']:has(> [class^='notice']) > [class^='bar'] > [class^='trailing'] {
  margin-top: calc(48px + (37px * 2));
}
 
[class^='upperContainer'] > [class^='toolbar'],
[class^='container'] [class^='headerBar'] > [class^='searchBar'] {
  margin-right: calc(76px + 8px);
}
 
[class^='base'] [class^='sidebar'] [class^='itemsContainer'] > [class^='stack'] {
  padding-top: 12px;
  padding-bottom: 12px;
}
 
[class^='base'] [class^='sidebar']:has([class^='tree'] > [class^='itemsContainer'])::after {
  left: var(--custom-guild-list-width);
}
 
.theme-dark [class^='base'] [class^='sidebar'] [class^='tree']:has(> [class^='itemsContainer'] > [class^='stack']) {
  background: rgba(0, 0, 0, 0.45);
}
 
/* Round server icons */
 
[class^='base'] [class^='sidebar'] [role='tree'] [class^='stack'] > [class^='listItem'] > div > [class^='blobContainer']:not(:hover):not([class*='selected']) svg > foreignObject [class^='wrapper'] :is([class^='childWrapper'], img) {
  border-radius: 100%;
  overflow: hidden;
}
 
/* Server icon size */
 
/* * {
  --guildbar-avatar-size: 48px;
}*/
 
/* Docked user panel */
 
[class^='base'] [class^='sidebar'] > [class^='wrapper']:has([role='tree']) {
  margin-bottom: 0px;
}
 
[class^='base'] [class^='sidebar'] > [class^='sidebarList'] [class^='scroller'] {
  margin-bottom: var(--custom-app-panels-height, 0);
}
 
[class^='base'] [class^='sidebar'] > [class^='sidebarList'] #channels {
  margin-bottom: 0px;
}
 
[class^='base'] [class^='sidebar'] [class^='panels']:has([class^='avatarWrapper']) {
  bottom: 0px;
  left: var(--custom-guild-list-width);
  right: 0px;
  width: calc(100% - var(--custom-guild-list-width));
  border-radius: 0px;
}
 
.theme-dark [class^='base'] [class^='sidebar'] [class^='panels']:has([class^='avatarWrapper']) {
  border-color: rgba(0,0,0,0.35);
  border-left-color: var(--app-border-frame);
}
 
.theme-dark [class^='base'] [class^='sidebar'] [class^='panels']:has([class^='avatarWrapper']) > div {
  background: rgba(0,0,0,0.35);
}
 
/* Categories in all-caps */
 
[class^='sidebarList'] #channels [class^='mainContent'][aria-expanded] [class*='name'],
[class^='sidebarList'] [class^='privateChannels'] [class*='HeaderContainer'] > [class^='headerText'] {
  text-transform: uppercase;
  font-size: 0.75rem;
  line-height: 0.75rem;
  font-weight: 600;
}
 
/* Chat text area offset */
 
[class^='chat'] [class^='chatContent'] [class^='channelTextArea'] {
  margin-bottom: calc(var(--custom-chat-input-margin-bottom) / 2);
}
 
[class^='chat'] [class^='chatContent'] [class^='typingDots'],
[class^='chat'] [class^='chatContent'] [class^='cooldownWrapper'] {
  background: var(--bg-overlay-floating,var(--chat-background-default));
  border: 1px solid transparent;
  border-bottom-color: var(--border-faint);
  border-radius: var(--radius-sm);
  padding: 0px 6px;
}
 
/* Darker member list */
 
.theme-dark [class^='chat'] [class^='membersWrap'] > [class^='members'] {
  --custom-channel-members-bg: var(--bg-base-tertiary);
}
 
/* DMs call UI Fix */
 
[class^='callContainer'] > [class^='root'] > div > [class^='root'] {
  margin-left: auto;
  margin-right: auto;
}
 
[class^='callContainer'] > [class^='root'] > div > [class^='root'] > [class^='transition'] {
  margin-top: auto;
  margin-bottom: auto;
}
`);
欢迎访问Greasy Fork镜像
