CSS & Styling Architecture
Relevant source files
The following files were used as context for generating this wiki page:
The styling architecture of the Solo-System project is designed to emulate the "System" interface from the Solo Leveling manhwa. It utilizes a dark-themed, futuristic aesthetic characterized by high-contrast neon accents, translucent panels, and dynamic visual feedback. The architecture is primarily implemented through internal CSS within the HTML files, utilizing CSS custom properties (variables) for consistent color mapping and Flexbox for responsive layout management.
Styling is tightly coupled with the application logic; JavaScript functions dynamically modify CSS properties to reflect player progress, such as rank color changes and experience bar transitions.
Global Design Tokens and Variables
The project centralizes its core color palette using CSS variables within the :root selector. This ensures that the "System" identity remains consistent across different components and pages.
| Variable | Value | Purpose |
|---|---|---|
--system-blue | #00d2ff | Primary accent color for borders, progress bars, and badges. |
--system-dark | #050510 | Base background color for the application. |
--penalty-red | #ff4d4d | Alert color used for failure messages and high-tier ranks. |
Sources: index.html:10-14, Quest.html:10-14
Layout Architecture
The application employs a centered, single-column layout optimized for mobile and desktop viewing. The layout is managed through a combination of Flexbox and fixed max-widths to maintain readability.
Core Containers
- Body: Acts as the primary flex container with
flex-direction: columnandalign-items: center. It uses aradial-gradientbackground to create depth. - Header: A full-width element constrained to
500pxthat establishes the page context with a bottom border using--system-blue. - Stats Panel & Tasks Container: These elements share a
max-width: 500pxto ensure a consistent vertical flow across the UI.
Sources: index.html:16-30, Quest.html:16-30
Visual Component Structure
The following diagram illustrates the relationship between the layout containers and the styling applied to them:
This diagram shows the structural hierarchy of the UI components and their primary styling attributes. Sources: index.html:16-65, Quest.html:16-65
Component Styling
The Stats Panel
The .stats-panel uses a "glassmorphism" approach with a semi-transparent dark background (rgba(10, 20, 40, 0.9)) and a subtle glow effect created by box-shadow: 0 0 20px rgba(0, 210, 255, 0.2).
Task Cards
Task cards are styled to indicate their state (active vs. completed).
- Default State: Features a blue right border and a slight transparency.
- Completed State: Triggered via the
.completedclass, which appliesfilter: grayscale(1)and reducesopacityto0.3, visually "retiring" the task.
Sources: index.html:32-65, Quest.html:32-65
Dynamic Styling Logic
A critical aspect of the styling architecture is the interaction between JavaScript and the DOM. The system updates the UI colors and bar widths based on the user's current points and rank.
Rank Color Mapping
The getRankConfig function determines the thematic color associated with each rank. These colors are applied directly to the rank-display element's color and textShadow properties.
| Rank | Points | Color Code | Visual Representation |
|---|---|---|---|
| F | 0-69 | #888 | Gray (Standard) |
| E/D/C/B/A | 70-1199 | #ffdd57 | Gold (Elite) |
| S | 1200-1999 | #00ffaa | Green (Master) |
| SS | 2000-2999 | #ff00ff | Purple (Legendary) |
| R | 3000+ | #ff4d4d | Red (System God) |
Sources: index.html:89-98, Quest.html:89-98
XP Bar Transitions
The progress bar implementation uses a nested div structure where the inner .xp-bar has a transition: width 0.6s ease-in-out. This allows for a smooth visual growth effect whenever points are earned.
// Example of dynamic style application
const config = getRankConfig(systemData.points);
const rd = document.getElementById('rank-display');
rd.innerText = config.rank;
rd.style.color = config.color;
rd.style.textShadow = `0 0 20px ${config.color}`;
Sources: index.html:48-49, index.html:116-120
Visual State Flow
The styling transitions between different system states (Normal, Penalty, and Completion) are handled via class toggling and direct style injection.
The flowchart describes the logic used to synchronize the visual state of the UI with the underlying data model. Sources: index.html:112-127, Quest.html:112-127
Summary of Styling Architecture
The CSS & Styling Architecture of the Solo-System relies on a "CSS-in-HTML" approach that favors rapid deployment and tight integration with JavaScript. By leveraging CSS variables for a core color palette and using JavaScript to inject styles dynamically, the project achieves a reactive, theme-heavy interface that mimics a game-like "System" dashboard. The use of standard modern CSS features like Flexbox and CSS Transitions ensures the interface remains responsive and smooth during data updates.