Customizing Styles
Relevant source files
The following files were used as context for generating this wiki page:
The styling architecture of the project is built using a combination of global CSS variables, utility-first frameworks, and component-specific stylesheets. The project leverages modern CSS techniques such as Glassmorphism, CSS Variables (:root), and Flexbox/Grid layouts to create a consistent, dark-themed user interface across various modules like the Chatbot, Articles, and User Profile sections.
Sources: frontend/front/src/index.css, frontend/front/src/chatbot/chatbot.css
Global Styling and Theming
The foundational styles are defined in index.css, which sets the global typography, color schemes, and base element behaviors. The project utilizes a dual-theme approach with a preference for dark mode, but includes media queries to support light mode via the prefers-color-scheme property.
Typography and Base Colors
The root configuration defines a system-ui font stack with a default line height of 1.5. Colors are primarily based on a dark palette with semi-transparent white text for readability.
:root {
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
}
Sources: frontend/front/src/index.css:2-10
Global Component Defaults
Standard elements like buttons and links have global transitions and hover states defined to ensure interactive consistency.
| Element | Property | Default Value | Hover State |
|---|---|---|---|
Link (a) | Color | #646cff | #535bf2 |
| Button | Background | #1a1a1a | Border: #646cff |
| Button | Border Radius | 8px | N/A |
Sources: frontend/front/src/index.css:20-43
Layout and Structural Styling
The application uses a centered layout approach for most main views, utilizing Flexbox on the body and specific container constraints in App.css.
Main Container Constraints
The root element is constrained to a maximum width to maintain readability on wide screens.
The diagram shows how structural styles flow from the viewport down to individual components.
Sources: frontend/front/src/index.css:30-35, frontend/front/src/App.css:1-6
Component-Specific Visual Patterns
The project frequently implements a "Glassmorphism" effect for cards and containers, characterized by semi-transparent backgrounds and backdrop filters.
Glassmorphism Implementation
This pattern is used in the Login, Signup, and Edit Profile cards. It involves rgba background colors and backdrop-filter: blur().
- Login Card: Uses
rgba(255, 255, 255, 0.15)with a 10px blur. - Edit Profile Card: Uses
rgba(255, 255, 255, 0.2)with a 12px blur. - Chatbot: Uses
rgba(255, 255, 255, 0.1)with a 10px blur.
Sources: frontend/front/src/loginpage.css:25-28, frontend/front/src/editprofilepage/editprofilepage.css:23-26, frontend/front/src/chatbot/chatbot.css:22-25
Messaging and Chatbot Styles
The chatbot interface utilizes a distinct dark gradient background and specialized message alignment.
The diagram illustrates the message bubble alignment logic used in the Chatbot component.
Sources: frontend/front/src/chatbot/chatbot.css:15-68
Detailed CSS Mapping
| Feature | CSS Class | Key Styles | Source File |
|---|---|---|---|
| Search Bar | .search-input | padding: 12px; width: 350px; border-radius: 8px; | article.css |
| Product Card | .product-card | flex: 0 0 250px; transition: transform 0.3s; | Products.css |
| Input Fields | .input-field | background: rgba(255, 255, 255, 0.2); color: #fff; | loginpage.css |
| Animations | .logo | filter: drop-shadow; transition: filter 300ms; | App.css |
Sources: frontend/front/src/Article/article.css:28-35, frontend/front/src/Products/Products.css:26-36, frontend/front/src/loginpage.css:50-58, frontend/front/src/App.css:8-13
Responsive Design
Responsive adjustments are handled through media queries, focusing on font sizes and layout flex properties. For example, the index.css file adjusts background colors for light mode, while Products.css enables horizontal scrolling for product lists on screens smaller than 1024px.
Sources: frontend/front/src/index.css:51-64, frontend/front/src/Products/Products.css:91-96