Custom CSS - Benutzerdefinierte Styles

Mit der Custom CSS Funktion können Sie die Benutzeroberfläche von SwissMentor nach Ihren Corporate Design Vorgaben anpassen. Das System ermöglicht es, CSS-Variablen zu überschreiben und eigene Styles hinzuzufügen.

Konfiguration

Die Custom CSS Funktion wird über die Systemkonfiguration verwaltet:

1. Administration → Systemkonfiguration → System → Web
2. Feld “Benutzerdefiniertes CSS” ausfüllen
3. Änderungen speichern

Das CSS wird automatisch in alle SwissMentor Seiten eingebunden und mit Caching optimiert.

Wichtige CSS-Variablen

Hauptfarben

:root {
  /* Primärfarben */
  --color-main: #1e5799; /* Hauptfarbe */
  --color-main-dark: #093e79; /* Dunklere Variante */
  --color-main-light: #2f75cc; /* Hellere Variante */
  --color-main-lighter: #1985db; /* Noch hellere Variante */
  --primary-color: #1e5799; /* Primärfarbe (alias) */
}

Buttons

:root {
  /* Button-Farben */
  --color-button-primary-background: #007ad9;
  --color-button-primary-hover-background: #0062a3;
  --color-button-secondary-background: #eeeeee;
  --color-button-secondary-hover-background: #cccbcb;
  --color-button-secondary-text: #333;
  --color-button-secondary-text-hover: #fff;
  --color-button-success-background: #4caf50;
  --color-button-success-hover-background: #388e3c;
}

Toolbar und Navigation

:root {
  /* Toolbar */
  --color-toolbar-icon: #1e5799; /* Icon-Farbe in Toolbars */

  /* Hintergründe */
  --color-section-header-background: #f6f6f6;
  --color-background-light: #f4f4f4;
  --color-background-selected: #d1ebff;
}

Neutrale Farben

:root {
  /* Graustufen */
  --color-neutral-100: #ffffff; /* Weiss */
  --color-neutral-95: #f5f7fa; /* Sehr helles Grau */
  --color-neutral-90: #ebeef2; /* Helles Grau */
  --color-neutral-80: #d8dee8; /* Grau */
  --color-neutral-70: #b4bdcc; /* Mittleres Grau */
  --color-neutral-60: #8a95a8; /* Dunkles Grau */
  --color-neutral-50: #6b7689; /* Sehr dunkles Grau */
  --color-neutral-40: #4f5a6d; /* Dunkelgrau */

  /* Text-Farben */
  --color-text-almostblack: #232323; /* Haupttext */
  --color-text-disabled: #cccccc; /* Deaktivierter Text */
}

Status-Farben

:root {
  /* Status-Farben */
  --color-success: #4caf50; /* Erfolg (Grün) */
  --color-warning: #ff9800; /* Warnung (Orange) */
  --color-error: #f44336; /* Fehler (Rot) */
  --color-info: #0078d4; /* Information (Blau) */
  --color-secondary: #9e9e9e; /* Sekundär (Grau) */
}

Layout und Design

:root {
  /* Abstände und Formen */
  --border-radius: 8px; /* Standard-Eckenradius */
  --transition-speed: 0.2s; /* Animationsgeschwindigkeit */
  --card-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); /* Schatten für Karten */

  /* Schriftarten */
  --font-family: 'Roboto', sans-serif; /* Hauptschriftart */
}

Tabellen (SwissMentor Tables)

:root {
  /* Tabellen-Design */
  --sm-table-border-color: #d8dee8;
  --sm-table-header-bg: #f5f7fa;
  --sm-table-row-height: 26px;
  --sm-table-header-height: 28px;
  --sm-table-hover-bg: #ffffff;
  --sm-table-editing-bg: #e8f4f8;
  --sm-table-editing-border: 1px solid #1e5799;
  --sm-table-font-size: 0.85rem;
  --sm-table-header-font-size: 0.8rem;
}

Beispiel-Konfigurationen

Corporate Design “Tech Blue”

:root {
  --color-main: #0066cc;
  --color-main-dark: #004499;
  --color-main-light: #3388dd;
  --primary-color: #0066cc;
  --color-button-primary-background: #0066cc;
  --color-button-primary-hover-background: #004499;
  --color-toolbar-icon: #0066cc;
}

Dunkles Theme (Beispiel)

:root {
  --color-neutral-100: #1a1a1a;
  --color-neutral-95: #2d2d2d;
  --color-neutral-90: #404040;
  --color-text-almostblack: #ffffff;
  --color-section-header-background: #2d2d2d;
  --color-background-light: #333333;
}

Sicherheit und Best Practices

Automatische Sicherheitsfilter

Das System filtert automatisch gefährliche CSS-Inhalte:

• @import Anweisungen werden blockiert
• javascript: URLs werden entfernt
• expression() Funktionen werden blockiert
• Andere potentiell gefährliche Konstrukte werden gefiltert

Best Practices

1. CSS-Variablen verwenden: Nutzen Sie die vordefinierten Variablen statt feste Werte
2. Spezifität beachten: Verwenden Sie !important sparsam
3. Performance: Vermeiden Sie komplexe Selektoren
4. Testen: Testen Sie Änderungen in verschiedenen Browsern
5. Backup: Dokumentieren Sie Ihre CSS-Anpassungen

Automatische Optimierungen

• Caching: CSS wird 5 Minuten gecacht (Server + Browser)
• Auto-Wrapping: CSS-Variablen werden automatisch in :root {} eingeschlossen
• Kommentare: Automatischer Header mit Generierungszeitpunkt

Troubleshooting

CSS wird nicht angewendet

1. Browser-Cache leeren: Strg+F5 für Hard Refresh
2. Entwicklertools prüfen: F12 → Network Tab → /api/custom.css prüfen
3. CSS-Syntax prüfen: Ungültiges CSS kann die gesamte Regel ungültig machen
4. Spezifität prüfen: Möglicherweise werden Ihre Styles überschrieben

Änderungen werden nicht sofort sichtbar

• Das System cached CSS für 5 Minuten
• Bei Entwicklung: Browser-Cache deaktivieren (F12 → Network → “Disable cache”)
• In Produktion: Warten oder Server-Neustart

Technische Details

• Endpoint: /api/custom.css
• Cache-Dauer: 5 Minuten (Server + Browser)
• Content-Type: text/css
• Encoding: UTF-8
• CORS: Aktiviert für Cross-Origin Requests

Das Custom CSS wird über eine dedizierte API-Route bereitgestellt und in der index.html dynamisch eingebunden, um Kompatibilität mit allen Deployment-Szenarien zu gewährleisten.