Appearance

Styles Documentation ​

Overview ​

The Admin Frontend uses a modular CSS architecture with component-specific stylesheets. Styles are organized by feature/module and loaded as needed. The application uses CSS custom properties (CSS variables) for theming and consistent design tokens.

CSS Architecture ​

File Organization ​

All CSS files are located in assets/css/ directory:

assets/css/
├── custom.css              # Main custom styles (207KB)
├── vendor.css              # Third-party vendor styles (683KB)
├── collage-header.css      # Header/alert box styles
├── collage-search.css      # Search page styles
├── dam-dropzone.css        # File upload dropzone styles
├── dashboard.css           # Dashboard page styles
├── general-settings.css    # Settings page styles
├── insights.css            # Analytics/insights styles
├── leftmenu.css            # Left sidebar navigation styles
├── assets-detail.css       # Asset detail page styles
├── collage.css             # General collage styles
├── collage-login.css       # Login page styles
├── collages-details.css    # Collage detail page styles
├── collages-list.css       # Collage list page styles
└── save-collage.css        # Save collage dialog styles

CSS Variables ​

The application uses CSS custom properties for theming:

css
/* Colors */
--DBred50, --DBred10, --DBred20
--DBblue
--DBgray, --DBgray5252, --DBgrayLight, --DBgrayLight1, --DBgrayLight2, --DBgrayLight3
--DBgrayD9D9, --DBgrayCFCF, --DBgrayB4B4
--DBpurpleLight
--DBwhite

/* Typography */
--fontsize11, --fontsize12, --fontsize13, --fontsize14, --fontsize18, --fontsize22

/* Borders & Shadows */
--borderColor
--boxshadow10

/* Spacing */
Standard spacing units used throughout

Style Files ​

Collage Header ​

  • File: collage-header.css
  • Purpose: Header alert box and notification styles
  • Size: ~873 bytes
  • File: collage-search.css
  • Purpose: Search page, filters, and results styles
  • Size: ~7.2 KB

DAM Dropzone ​

  • File: dam-dropzone.css
  • Purpose: File upload dropzone and upload queue styles
  • Size: ~8.6 KB

Dashboard ​

  • File: dashboard.css
  • Purpose: Dashboard page, boxes, and collage grid styles
  • Size: ~10.2 KB

General Settings ​

  • File: general-settings.css
  • Purpose: Settings page and form styles
  • Size: ~11.1 KB

Insights ​

  • File: insights.css
  • Purpose: Analytics and insights page styles
  • Size: ~952 bytes

Left Menu ​

  • File: leftmenu.css
  • Purpose: Left sidebar navigation and menu styles
  • Size: ~6.5 KB

Usage ​

Importing Styles ​

Styles are imported in Nuxt.js configuration or component files:

javascript
// In nuxt.config.js
css: [
  '~/assets/css/custom.css',
  '~/assets/css/collage-header.css',
  '~/assets/css/collage-search.css'
]

// In component
<style scoped>
@import '~/assets/css/dam-dropzone.css';
</style>

CSS Variables Usage ​

css
.my-component {
  color: var(--DBgray);
  background-color: var(--DBgrayLight);
  border: 1px solid var(--borderColor);
  font-size: var(--fontsize14);
}

Responsive Design ​

Styles include responsive breakpoints:

  • Mobile: max-width: 599.98px
  • Tablet: max-width: 960.98px
  • Desktop: min-width: 600px
  • Large Desktop: max-width: 1639.98px

Best Practices ​

  1. Use CSS Variables: Always use CSS custom properties for colors, spacing, and typography
  2. Component Scoping: Use scoped styles in components when possible
  3. Modular Approach: Import only necessary CSS files
  4. Responsive First: Design mobile-first, then enhance for larger screens
  5. Consistent Naming: Follow existing naming conventions