Discord (web) - Remove top bar in the new 2025 UI refresh

The bar is pretty useless and takes a ton of vertical space.

目前為 2025-03-30 提交的版本,檢視 最新版本

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

/* ==UserStyle==
@name           Discord (web) - Remove top bar in the new 2025 UI refresh
@description    The bar is pretty useless and takes a ton of vertical space.
@namespace      https://greasyfork.org/en/users/4813
@author         Swyter
@version        2025.03.28
@license        CC-BY-SA 4.0
@preprocessor   default
==/UserStyle== */
 
@-moz-document domain("discord.com")
{
    .visual-refresh {
        /* swy: change the CSS variable so that the rest of the layout that goes below complies :) */
        --custom-app-top-bar-height: 0px !important;
    
        /* swy: hide the top bar contents, otherwise some icons bleed through */
        div[class^='container_'] > div[class^='base_'] > div[class^='bar_'] {
            display: none !important;
        }
    
        /* swy: restore the top padding for the sidebar server icon list (so that the Direct Messages button doesn't look weird) */
        div[class^='sidebar_'] > nav[class^='wrapper_'] > ul[class^='tree_'] > div[class^='itemsContainer_'] > div[class^='stack_'] {
            padding-top: 12px !important; /* swy: 12px is the original value */
        }
    }
}