Styling

Styles are global and feature-specific under assets/css/. Vuetify provides the component theme. There are no page-level CSS files; keep styling consistent via shared CSS and Vuetify.

Global CSS (nuxt.config)

Loaded in nuxt.config.js via:

css: ['~/assets/css/collage.css', '~/assets/css/custom.css']

• collage.css – Core Collage layout and components.
• custom.css – Overrides and custom global styles.

Feature-specific CSS

These files are imported where needed (e.g. in layouts or parent components), not in nuxt.config:

File	Purpose
assets/css/general-settings.css	Workspace settings pages
assets/css/dashboard.css	DAM dashboard
assets/css/collage-search.css	Search UI (DAM/collage)
assets/css/leftmenu.css	Left navigation
assets/css/damnotification.css	DAM notifications
assets/css/collage-header.css	Collage header
assets/css/collage-login.css	Login page
assets/css/collages-list.css	Collages list
assets/css/collages-details.css	Collage detail
assets/css/assets-detail.css	Asset detail
assets/css/portals.css	Portals list and detail pages
assets/css/save-collage.css	Save collage UI

Deleted in development branch: insights.css, vendor.css, dam-dropzone.css.

Vuetify

Configured in nuxt.config.js under vuetify:

• defaultAssets: icons mdi.
• treeShake: true.
• theme.themes: light and dark with primary/secondary/accent/error/info/success/warning (values in config).

Use Vuetify components and theme for layout, buttons, forms, and dialogs to keep the UI consistent.

Convention

• Do not add page-specific CSS files; use shared styles in assets/css/ or component-scoped styles.
• Prefer Vuetify props and classes; use custom CSS only when necessary.
• For new features, add a dedicated CSS file under assets/css/ if the scope is large, or use existing files (e.g. custom.css) for small changes.