Skip to content

Minor Revision

Choose a tag to compare

View all tags
@madmaxgrey madmaxgrey released this 14 Dec 06:46
· 146 commits to main since this release
3.1
f4ab1de

馃殌 Vertical-Spacious-Refresh: Version 3.1 Release Notes (Final & Complete)

This major release integrates numerous external CSS modules with deep internal configurations to provide a highly streamlined, dynamic, and personalized user experience. Version 3.1 focuses on maximizing screen real estate and enhancing visual fidelity through targeted aesthetic controls.

I. Dynamic & Collapsible UI (Focus Feature)

To maximize space, several prominent UI components now hide by default and reveal themselves only on hover.

Feature Default State Hover State Visual Indicator
Pinned DMs / Headers Pushed 45px off-screen (translateX(45px)). Remains off-screen (hover effect removed). A bold, 30px capsule line (--mc color) is fixed to the left edge as a permanent tab.
Server Member List Condensed to 60px wide, hiding member names. Slides fully into view (translateX(-196px)), revealing the full list. A gray capsule line is fixed to the left edge as a temporary visual anchor.
Message Action Bar Entirely hidden. Reveals all buttons and reactions. N/A
Chat Input Buttons Only Emoji and App Launcher visible. Reveals all other input controls (e.g., GIF, Sticker). N/A

II. Aesthetic & Color Branding (Accent: --mc)

The theme is now tied to a strong primary color (--mc), which defines the visual identity of all interactive elements.

  • Universal Accent Color: The --mc variable is now applied to all primary interactive elements: selection/hover states, switches, the "Add Friend" button, and key message actions.
  • Unread & Important Channels: Text in unread important channels is styled using a text mask and background-clip: text effect, filling the foreground text with the accent color.
  • LED Strip Tooltips: Tooltips and Picture-in-Picture video elements gain a custom border, shadow, and dotted outline using the --mc color for a distinct, glowing effect.
  • Gradient Hover Effect: When hovering over or selecting a channel, a 2px gradient line sweeps across the bottom of the link using var(--gradientColor01) and var(--gradientColor02).

III. Layout & Visual Enhancements

1. Channel & Thread Lines (New)

The sidebar channel list gains a Vertical Channel Line design to visualize hierarchy:

  • Default channel spine borders are hidden.
  • A custom, vertical 1px line, colored with --mc, is rendered along the left edge of each channel link container.
  • Thread icons and borders are explicitly colored with --mc for consistency.

2. Bordered Embeds & Profile Connections

  • Bordered Embeds: Embeds (e.g., website previews) are visually contained within a 4px border and use a custom color-mix background for a layered, framed look.
  • Profile Connections: Connections (Twitch, Steam, etc.) are reorganized into a two-column grid, with each link contained in a rounded, bordered box.

3. Folder Icon Styling

Folder previews display a semi-transparent, white "folder" icon. On hover, this icon fades out while the embedded server icons sharpen and become fully opaque for a dynamic reveal.

IV. Core Configuration Toggles

The following features can be toggled via Vencord/Theme settings for granular control over layout density:

Feature Toggle Description
Compact Input Box Reduces chatbox height to 44px and standardizes button padding.
Compact User Area Minimizes the user panel at the bottom of the sidebar.
Compact Channels Tightens the spacing and visual style of the channel list.
No Border UI Removes all UI borders, dividers, and separators for a seamless visual flow.
IRC Compact Chats Reduces avatar size and adjusts message alignments for a condensed, IRC-like chat aesthetic.
Compact Guilds Bar Hides the server list by default; it slides out on hover.

V. Integrated External Modules & Credits

The following modules are integrated and configured:

  • @import url("https://discordstyles.github.io/RadialStatus/RadialStatus.css");
  • @import url("https://dablulite.github.io/css-snippets/TabsV2HomeIcon/import.css");
  • @import url(https://nspc911.github.io/themes/vencord/ChatRelatedAlertsAtTop.theme.css);
  • @import url("https://nspc911.github.io/themes/vencord/RefreshedSeamlessChatBar.theme.css");
  • @import url("https://mwittrien.github.io/BetterDiscordAddons/Themes/_res/SettingsIcons.css");
  • @import url("https://davart154.github.io/Themes/Snippets/Simplified%20Panel%20Area/SimplifiedPanelArea.css");
  • @import url("https://raw.githubusercontent.com/moonself/Vencord-Repos/refs/heads/main/Message%20Actions%20Hover");
  • @import url("https://raw.githubusercontent.com/yiruzu/vencord-snippets/refs/heads/main/snippets/BubbleUsernames/import.css");
  • @import url("https://raw.githubusercontent.com/Krammeth/css-snippets/refs/heads/main/CompactButtons.css");
Assets 3
Loading