Extension Css

CSS files are loaded via manifest.json content script declarations — no build step, no preprocessor.

Class Naming Conventions

Prefix patterns (by feature area)

BEM pattern (used in newer components)

.ai-image-analyzer              — block
.ai-image-analyzer__upload-zone — element
.ai-image-analyzer__upload-zone--dragover — modifier

Older components use flat classes

.ai-assist-button
.ai-master-button
.quality-score

When adding new components, prefer BEM with a feature prefix.

Color Palette

Primary actions

State colors

Warning severity colors

Amber warning (analytics)

FAQ hint styling

Economy KPI

Dashboard (dark theme support)

The admin dashboard uses Auctionet's existing dark/light theme. The analytics page uses a .ad-dark class with full CSS custom property overrides for all --ad-* variables.

KPI card colors (dashboard)

Border-left color modifiers via named classes:

.ext-kpi-card--green   { border-left-color: #28a745; }  /* positive metrics */
.ext-kpi-card--blue    { border-left-color: #006ccc; }  /* neutral/info metrics */
.ext-kpi-card--orange  { border-left-color: #e65100; }  /* warning metrics */
.ext-kpi-card--red     { border-left-color: #dc3545; }  /* alert metrics */
.ext-kpi-card--yellow  { border-left-color: #f0ad4e; }  /* caution metrics */
.ext-kpi-card--purple  { border-left-color: #6f42c1; }  /* special metrics */

Analytics CSS variables (analytics.css)

The analytics dashboard uses a full CSS custom property system with dark mode toggle:

:root {
  --ad-bg: #f8f9fa;        --ad-card-bg: #ffffff;
  --ad-border: #e2e8f0;    --ad-text: #1e293b;
  --ad-accent: #2563eb;    --ad-positive: #16a34a;
  --ad-negative: #dc2626;  --ad-warn: #d97706;
  --ad-bar: #3b82f6;       --ad-shadow: 0 1px 3px rgba(0,0,0,0.08)...;
}
.ad-dark { /* overrides all --ad-* variables for dark theme */ }

Common Patterns

AI Button with wrapper

<div class="ai-button-wrapper">
  <button class="ai-assist-button" data-field-type="title">AI-forslag</button>
  <button class="ai-assist-button" data-field-type="description">AI-forslag</button>
  <button class="ai-master-button">Forbattra alla</button>
</div>

Field updated state

When AI updates a field, add .ai-updated class:

field.classList.add('ai-updated');
// To revert:
field.classList.remove('ai-updated');

Loading spinner overlay

Spinners are positioned over fields during AI processing:

<div class="field-spinner-overlay" data-field-type="title">...</div>

Parent gets .field-loading class during processing.

Quality score display

<div class="quality-indicator">
  <div class="quality-header">
    <span class="quality-title">Kvalitet</span>
    <div class="quality-score-container">
      <span class="quality-score good|medium|poor">85</span>
    </div>
  </div>
  <div class="quality-warnings">
    <ul><li>Warning text here</li></ul>
  </div>
</div>

Dashboard entity badges

<span class="ext-comment-badge ext-comment-badge--buyer">Kopare</span>
<span class="ext-comment-badge ext-comment-badge--item">Foremal</span>
<span class="ext-comment-badge ext-comment-badge--claim">Reklamation</span>

Filter pills (comment enhancer)

<div class="ext-filter-bar">
  <button class="ext-filter-pill ext-filter-pill--alla ext-filter-pill--active">Alla</button>
  <button class="ext-filter-pill ext-filter-pill--reklamation">Reklamation</button>
  <button class="ext-filter-pill ext-filter-pill--kopare">Kopare</button>
</div>

JS-Injected Styles

Some components inject styles via JavaScript rather than CSS files:

• admin-dashboard.js injects <style> tags for dynamically generated dashboard elements
• modules/ui/ui-controller.js applies inline styles for field highlights and undo buttons
• modules/enhance-all/enhance-all-manager.js creates the enhance-all panel DOM with inline styles where needed

When modifying these components, check both the CSS file AND the JS source for styling.

Advanced UI Patterns

Dialog system (styles.css)

<div class="dialog-overlay">
  <div class="dialog-content">
    <div class="info-request-form">
      <div class="form-group">...</div>
    </div>
    <div class="dialog-buttons">
      <button class="btn-primary">OK</button>
      <button class="btn-default">Cancel</button>
    </div>
  </div>
</div>

Field loading states

.field-loading          /* state class on parent */
.field-spinner-overlay  /* loading overlay */
.ai-spinner             /* animated spinner */
.field-success          /* success flash animation */

Status indicators

.ai-status-indicator.loading  /* blue (#337ab7) */
.ai-status-indicator.success  /* green */
.ai-status-indicator.error    /* red */
.ai-processing-text           /* processing label */

Artist bio tooltip

.artist-bio-tooltip           /* inline trigger */
.artist-bio-preview.loading   /* loading state */

Image analyzer CSS variables (ai-image-analyzer.css)

Uses a separate variable system from analytics: var(--bg-white), var(--border-light), var(--color-danger), var(--transition-normal), etc. (Bootstrap-like naming, not --ad-*)

Important Rules

1. No !important spam — only use for overriding Auctionet's own styles when absolutely necessary (.ai-updated is an exception)
2. Max-width constraints — button wrappers use max-width: 450px to stay within form column
3. Transitions — use transition: all 0.3s ease for interactive elements
4. Font sizes — buttons use 12px, labels use 13px, stay consistent with Auctionet's admin font sizing
5. z-index — extension uses high z-index values (10000+) to layer above Auctionet's own UI. Overlays/modals use 10000–10002, spinners within fields use 9999+. Check existing values in the target CSS file before choosing a z-index