feat: v6.0 complete UI/UX redesign — glass hierarchy, background blobs, gradient typography, card variants, navigation polish, micro-interactions #1

Merged

crashmedia merged 1 commit from v6-complete-redesign into main

2026-05-22 03:58:29 +00:00

crashmedia commented

2026-05-22 03:56:58 +00:00

Owner

Summary

Complete redesign of the Vertex Pterodactyl theme CSS from v5.0 to v6.0 — a comprehensive overhaul of all three CSS files.

What Changed

1. Background System (P0)

Radial gradient blobs — 5 animated blobs (neon green, cyan, purple) positioned behind content with filter: blur(80px) and floating animation
Noise/grain texture — SVG-based noise overlay for depth
Scanline effect — crashcrafts.com brand DNA with subtle repeating gradient lines

2. Glass Hierarchy (P0) — 4 Tiers

glass-heavy — modals, overlays, floating windows (92% opacity, 32px blur)
glass — primary cards, panels (85% opacity, 24px blur)
glass-light — nav bars, sub-panels (70% opacity, 16px blur)
glass-subtle — tabs, inline elements (50% opacity, 12px blur)

3. Typography System (P1)

Display headings with gradient text (--gradient-brand)
Proper hierarchy: display (3rem) → h1 (2.25rem) → h2 (1.75rem) → h3 (1.25rem) → h4 (1rem) → body (0.875rem)
Gradient text utility classes (.vertex-gradient-text, .vertex-gradient-text-purple)
Letter-spacing variation: headings tighter, labels wider

4. Button System (P1)

Gradient primary button with glow shadow
Increased radius: 8px default, 12px large, 6px small
Asymmetric corner variant (12px 4px 12px 4px)
Ghost, outline, gradient, solid, danger, success variants
Icon button support, loading state with spinner
Full-width block variant

5. Card Variants (P1)

Stat card — icon + metric (gradient) + label + trend indicator
Feature card — icon background + title + description + CTA
Plugin card — icon + name + rating + downloads + install button
Server card — status dot + name + node + resources + actions
Image card — background image + overlay + content with zoom on hover
Gradient border card with animated reveal on hover

Icon + text nav items with opacity transitions
Grouped sections with headers (.vertex-nav-section)
Collapsible tree support (.vertex-nav-tree)
Active state: gradient left border + background + icon color change
Sidebar search input support
Badge support for notification counts (.vertex-nav-badge)

7. Input System (P2)

8px default radius, 12px for search
Glass background with subtle border
Icon support (left-aligned with wrapper)
Animated focus ring with glow
Floating label support
Select, textarea, checkbox, toggle switch variants

8. Micro-Interactions (P2)

Hover glow intensification on cards
Animated gradient borders on focus
Skeleton loading animations
Pulse animations for status indicators
Smooth expand/collapse for sections
Fade-in, slide-in-left, scale-in entrance animations

9. Dark Mode Updates

All AdminLTE overrides updated to use new glass hierarchy tokens
Background blob opacity increased for dark mode visibility
Floating windows use glass-heavy class
Progress bars use gradient fills with glow
All radius values use design token system

10. Progress Bars & Metrics

Gradient fills with glow effects
Animated width transitions
Metric counters with large gradient numbers
Color variants: danger (red-orange), warning (amber), info (blue-cyan)

Design Tokens

All values centralized in :root CSS custom properties:

--neon: #00ff88, --accent: #00d4ff
Complete radius scale: xs → 2xl + full + asymmetric
Z-index scale, shadow scale, transition timing functions
4-tier glass hierarchy with consistent blur/opacity ratios

Backward Compatibility

All existing class names preserved (.glass, .vertex-btn, .vertex-card, etc.)
New classes added alongside existing ones
Tailwind directives and Inter font import maintained

## Summary Complete redesign of the Vertex Pterodactyl theme CSS from v5.0 to v6.0 — a comprehensive overhaul of all three CSS files. ### What Changed #### 1. Background System (P0) - **Radial gradient blobs** — 5 animated blobs (neon green, cyan, purple) positioned behind content with `filter: blur(80px)` and floating animation - **Noise/grain texture** — SVG-based noise overlay for depth - **Scanline effect** — crashcrafts.com brand DNA with subtle repeating gradient lines #### 2. Glass Hierarchy (P0) — 4 Tiers - **`glass-heavy`** — modals, overlays, floating windows (92% opacity, 32px blur) - **`glass`** — primary cards, panels (85% opacity, 24px blur) - **`glass-light`** — nav bars, sub-panels (70% opacity, 16px blur) - **`glass-subtle`** — tabs, inline elements (50% opacity, 12px blur) #### 3. Typography System (P1) - **Display headings** with gradient text (`--gradient-brand`) - **Proper hierarchy**: display (3rem) → h1 (2.25rem) → h2 (1.75rem) → h3 (1.25rem) → h4 (1rem) → body (0.875rem) - **Gradient text utility** classes (`.vertex-gradient-text`, `.vertex-gradient-text-purple`) - Letter-spacing variation: headings tighter, labels wider #### 4. Button System (P1) - **Gradient primary** button with glow shadow - **Increased radius**: 8px default, 12px large, 6px small - **Asymmetric corner** variant (`12px 4px 12px 4px`) - Ghost, outline, gradient, solid, danger, success variants - Icon button support, loading state with spinner - Full-width block variant #### 5. Card Variants (P1) - **Stat card** — icon + metric (gradient) + label + trend indicator - **Feature card** — icon background + title + description + CTA - **Plugin card** — icon + name + rating + downloads + install button - **Server card** — status dot + name + node + resources + actions - **Image card** — background image + overlay + content with zoom on hover - **Gradient border** card with animated reveal on hover #### 6. Navigation System (P2) - Icon + text nav items with opacity transitions - Grouped sections with headers (`.vertex-nav-section`) - Collapsible tree support (`.vertex-nav-tree`) - Active state: gradient left border + background + icon color change - Sidebar search input support - Badge support for notification counts (`.vertex-nav-badge`) #### 7. Input System (P2) - 8px default radius, 12px for search - Glass background with subtle border - Icon support (left-aligned with wrapper) - Animated focus ring with glow - Floating label support - Select, textarea, checkbox, toggle switch variants #### 8. Micro-Interactions (P2) - Hover glow intensification on cards - Animated gradient borders on focus - Skeleton loading animations - Pulse animations for status indicators - Smooth expand/collapse for sections - Fade-in, slide-in-left, scale-in entrance animations #### 9. Dark Mode Updates - All AdminLTE overrides updated to use new glass hierarchy tokens - Background blob opacity increased for dark mode visibility - Floating windows use `glass-heavy` class - Progress bars use gradient fills with glow - All radius values use design token system #### 10. Progress Bars & Metrics - Gradient fills with glow effects - Animated width transitions - Metric counters with large gradient numbers - Color variants: danger (red-orange), warning (amber), info (blue-cyan) ### Design Tokens All values centralized in `:root` CSS custom properties: - `--neon: #00ff88`, `--accent: #00d4ff` - Complete radius scale: xs → 2xl + full + asymmetric - Z-index scale, shadow scale, transition timing functions - 4-tier glass hierarchy with consistent blur/opacity ratios ### Backward Compatibility - All existing class names preserved (`.glass`, `.vertex-btn`, `.vertex-card`, etc.) - New classes added alongside existing ones - Tailwind directives and Inter font import maintained

crashmedia added 1 commit

2026-05-22 03:56:58 +00:00