UI Styling - Incomplete-Infinity/eve-companion GitHub Wiki

🎨 UI Styling

This page documents the visual design system of the EVE Companion App. It outlines our use of third-party CSS frameworks, our sci-fi aesthetic, and our approach to layout, component styling, and responsive design.

🎭 Style Philosophy

  • Futuristic, sci-fi themes inspired by EVE Online
  • Layered visuals using augmented-ui, shadows, and glows
  • Modular components styled with utility-first classes
  • Built for rapid delivery, with later refinement

πŸ–ŒοΈ CSS Frameworks Used

Framework Purpose
Halfmoon.css Grid, spacing, responsive layout
Topcoat.css Clean, flat UI components
Augmented UI Complex borders, sci-fi corner and panel styles
Bootstrap.js JS behaviors (modals, dropdowns - optional)

These frameworks are additive. We treat Halfmoon and Topcoat as utility toolkits, and Augmented UI as our primary visual signature.

🎨 Visual Identity

Panels

Panels and containers use data-augmented-ui attributes to apply visual borders and inlays. Example:

<div data-augmented-ui="tl-clip br-clip inlay">
  <h2>Fleet Commander</h2>
  <p>Status: Online</p>
</div>

Empire Themes (Planned)

Empire Style Notes
Amarr Gold, marble, ornate round edges
Caldari Blue/gray, clip corners, brushed steel
Gallente Green, scoop-style curves, organic feel
Minmatar Rust tones, rectangular cuts, riveted look

πŸ” Responsive Layouts

  • Uses Halfmoon’s flex and grid classes for layout
  • Panel containers are built to scale across resolutions
  • Interact.js is used to allow dragging/resizing of window elements

Example:

<div class="container-fluid d-flex flex-wrap">
  <div class="window p-2 m-1 col-12 col-md-6">
    <!-- Module content -->
  </div>
</div>

🌌 Interactive Enhancements

Library Purpose
tippy.js Tooltips
notyf Toast notifications
interact.js Dragging and resizing windows
AOS Scroll-triggered animations

These libraries are applied contextually, based on the feature.

πŸ“ƒ Style Guide Directory

All visual references, draft themes, and design assets are stored in:

style-guide/
β”œβ”€β”€ empire-colors.md
β”œβ”€β”€ layout-sketches.png
β”œβ”€β”€ aug-ui-examples.html

βœ… Recommendations

  • Use augmented-ui to visually distinguish primary UI elements
  • Apply consistent padding/margins using Halfmoon or Topcoat utilities
  • Use data-augmented-ui-reset inside components to remove inherited styles if needed

πŸ” Future Styling Goals

  • Full empire-themed skins with toggle
  • Animated SVG backdrops (fleet, starmap, planet surface)
  • Dark mode / light mode support (via data-bs-theme)
  • Reduced dependency on third-party frameworks over time

πŸ“… Summary

  • Halfmoon handles layout
  • Topcoat supports basic UI behavior
  • Augmented UI defines the visual signature
  • Interaction is powered by tippy.js, notyf, and interact.js

Next: Build & Scripts

⚠️ **GitHub.com Fallback** ⚠️