/* ============================================
PetriFlow – Design System & Styles
============================================
Diese CSS-Datei definiert das gesamte Aussehen der PetriFlow-App.
AUFBAU:
1. CSS Custom Properties (Variablen / Design-Tokens)
2. Reset & Basis-Styles
3. Header (Kopfzeile mit Logo & Buttons)
4. Buttons (wiederverwendbare Klassen)
5. Layout (Hauptstruktur der App)
6. Toolbar (Werkzeugleiste links)
7. Canvas (Zeichenfläche)
8. SVG-Elemente (Stellen, Transitionen, Kanten, Token)
9. Simulations-Steuerung (Play/Pause/Record)
10. Modals (Popup-Dialoge)
11. Formulare
12. Responsive Design (Anpassung für kleine Bildschirme)
============================================ */
/* ─────────────────────────────────────────────
CSS CUSTOM PROPERTIES (Design-Tokens)
─────────────────────────────────────────────
WAS SIND CUSTOM PROPERTIES?
Custom Properties (auch "CSS-Variablen" genannt) beginnen mit "--"
und werden in :root definiert, damit sie ÜBERALL verfügbar sind.
WARUM?
Statt eine Farbe wie #6c63ff an 20 Stellen zu wiederholen,
definiert man sie EINMAL als Variable. Wenn sich die Farbe ändert,
muss man nur EINE Stelle anpassen.
VERWENDUNG:
Definieren: --color-primary: #6c63ff;
Verwenden: color: var(--color-primary);
:root bedeutet "auf dem obersten Element" (= ),
dadurch sind die Variablen global in der gesamten Seite verfügbar.
*/
:root {
/* ── Hintergrundfarben ──
Dunkles Theme mit abgestuften Grautönen.
bg = Haupt-Hintergrund (fast schwarz)
bg-secondary = Leicht hellerer Hintergrund (Header, Sidebar)
surface = Oberfläche von Karten/Panels (noch heller)
surface-hover = Hover-Zustand von Oberflächen
*/
--color-bg: #0a0a0f;
--color-bg-secondary: #12121a;
--color-surface: #1a1a2e;
--color-surface-hover: #222240;
/* ── Rahmenfarben ──
border = Standard-Rahmenfarbe (dezent, dunkel)
border-active = Hervorgehobener Rahmen (z.B. bei Fokus)
*/
--color-border: #2a2a45;
--color-border-active: #5b5bf0;
/* ── Textfarben ──
text = Normaler Text (fast weiß)
text-muted = Weniger wichtiger Text (gedämpft/grau)
text-dim = Sehr dezenter Text (Labels, Platzhalter)
*/
--color-text: #e8e8f0;
--color-text-muted: #8888a8;
--color-text-dim: #55556a;
/* ── Primärfarbe (Lila/Violett) ──
Die Hauptfarbe der App. Wird für Stellen (Places),
aktive Elemente und Akzente verwendet.
"glow" = halbtransparente Version für Leuchteffekte (box-shadow)
"hover" = hellere Version für den Maus-Hover-Zustand
*/
--color-primary: #6c63ff;
--color-primary-glow: rgba(108, 99, 255, 0.3);
--color-primary-hover: #7f78ff;
/* ── Akzentfarbe (Türkis/Grün) ──
Sekundäre Farbe für Transitionen und Erfolgs-Feedback.
Erzeugt einen schönen Kontrast zur Primärfarbe.
*/
--color-accent: #00d4aa;
--color-accent-glow: rgba(0, 212, 170, 0.25);
/* ── Gefahrfarbe (Rot) ──
Wird für Fehlermeldungen, Löschen-Buttons und
Inhibitor-Kanten (blockierende Kanten) verwendet.
*/
--color-danger: #ff4466;
--color-danger-glow: rgba(255, 68, 102, 0.2);
/* ── Petri-Netz-Element-Farben ──
Spezifische Farben für die Elemente auf der Zeichenfläche:
place = Stellen-Umrandung (Lila)
place-fill = Stellen-Füllung (sehr transparent, damit man Token sieht)
transition = Transitions-Umrandung (Türkis)
transition-fill = Transitions-Füllung (leicht transparent)
arc = Kanten/Pfeile (Grau)
token = Token-Punkte (Gelb, gut sichtbar auf dunklem Grund)
*/
--color-place: #6c63ff;
--color-place-fill: rgba(108, 99, 255, 0.08);
--color-transition: #00d4aa;
--color-transition-fill: rgba(0, 212, 170, 0.12);
--color-arc: #8888a8;
--color-token: #ffcc44;
/* ── Typografie (Schrift) ──
font-family: Schriftart-Kaskade. "Inter" wird von Google Fonts geladen.
Falls Inter nicht verfügbar ist, werden System-Schriften
als Fallback verwendet (-apple-system für macOS, etc.)
font-size-*: Einheitliche Größen in "rem" (relative Einheit,
basiert auf der Basis-Schriftgröße von 15px, siehe html-Regel)
*/
--font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-size-xs: 0.7rem; /* ~10.5px – Kleinste Schrift (Labels) */
--font-size-sm: 0.8rem; /* ~12px – Kleine Schrift (Buttons) */
--font-size-base: 0.9rem; /* ~13.5px – Standard-Schrift */
--font-size-lg: 1.1rem; /* ~16.5px – Große Schrift (Überschriften) */
/* ── Layout-Maße ──
Feste Größen für die Grundstruktur der App.
header-height = Höhe der Kopfzeile
toolbar-width = Breite der Werkzeugleiste links
radius-* = Eckenrundung (border-radius) in 3 Stufen
*/
--header-height: 52px;
--toolbar-width: 100px;
--radius-sm: 6px; /* Kleine Rundung (Buttons, Inputs) */
--radius-md: 10px; /* Mittlere Rundung (Toolbar-Buttons) */
--radius-lg: 14px; /* Große Rundung (Modals, Panels) */
/* ── Animationszeiten ──
Einheitliche Übergangszeiten für hover-Effekte etc.
"ease" = Beschleunigt am Anfang, bremst am Ende (natürliche Bewegung)
fast = 120ms für sofortiges Feedback (Hover, Klick)
base = 200ms für sanfte Übergänge (Farbwechsel, Ein-/Ausblenden)
*/
--transition-fast: 120ms ease;
--transition-base: 200ms ease;
}
/* ─────────────────────────────────────────────
RESET & BASIS-STYLES
─────────────────────────────────────────────
WAS IST EIN CSS-RESET?
Browser haben eingebaute Standard-Styles (z.B. Abstände um ,
).
Diese sind von Browser zu Browser unterschiedlich.
Mit einem Reset setzen wir ALLES auf 0 und bauen nur das auf,
was wir wirklich wollen. Das vermeidet unerwartete Abstände.
* = JEDES Element
*::before, *::after = Pseudo-Elemente (z.B. für Dekorationen)
box-sizing: border-box = Padding und Border werden IN die Breite
eingerechnet, statt sie draufzuaddieren. Ohne border-box wäre
ein Element mit width: 100px + padding: 10px insgesamt 120px breit!
*/
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*
Basis-Styles für die gesamte Seite:
- height: 100% → Seite füllt das ganze Fenster
- overflow: hidden → Kein Scrollen der Hauptseite (nur innerhalb der Canvas)
- font-family: var() → Schriftart aus den Custom Properties
- font-size: 15px → Basis-Schriftgröße (alle rem-Werte beziehen sich darauf)
- -webkit-font-smoothing → Glattere Schriftdarstellung auf macOS/Safari
*/
html, body {
height: 100%;
overflow: hidden;
font-family: var(--font-family);
font-size: 15px;
color: var(--color-text);
background: var(--color-bg);
-webkit-font-smoothing: antialiased;
}
/* ─────────────────────────────────────────────
HEADER (Kopfzeile / Navbar)
─────────────────────────────────────────────
Die Kopfzeile enthält das Logo links und die Action-Buttons rechts.
Layout-Technik: FLEXBOX
- display: flex → Kinder werden nebeneinander angeordnet
- align-items: center → Vertikal zentriert
- justify-content: space-between → Logo links, Buttons rechts (maximaler Abstand)
z-index: 100 → Header liegt über anderen Elementen (z.B. Canvas)
*/
#app-header {
display: flex;
align-items: center;
justify-content: space-between;
height: var(--header-height);
padding: 0 20px;
background: var(--color-bg-secondary);
border-bottom: 1px solid var(--color-border);
z-index: 100;
}
/* Logo + App-Name links im Header.
gap: 10px = Abstand zwischen Logo-Icon und Text */
.header-brand {
display: flex;
align-items: center;
gap: 10px;
}
/* SVG-Icon in der Primärfarbe */
.logo-icon {
color: var(--color-primary);
display: flex;
align-items: center;
}
/*
GRADIENT-TEXT-TRICK:
Der App-Name "PetriFlow" hat einen Farbverlauf (Lila → Türkis).
So funktioniert es:
1. background: linear-gradient(...) → Farbverlauf als Hintergrund
2. background-clip: text → Hintergrund wird auf Text-Form zugeschnitten
3. -webkit-text-fill-color: transparent → Textfarbe wird unsichtbar
→ Ergebnis: Der Farbverlauf "scheint durch" den Text
letter-spacing: -0.02em = Buchstaben etwas enger zusammen (kompakter Look)
*/
.header-brand h1 {
font-size: var(--font-size-lg);
font-weight: 600;
background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: -0.02em;
}
/* Buttons rechts im Header, nebeneinander mit 6px Abstand */
.header-actions {
display: flex;
gap: 6px;
}
/* ─────────────────────────────────────────────
BUTTONS (Wiederverwendbare Klassen)
─────────────────────────────────────────────
.btn = Basis-Button (transparent, mit Rahmen)
.btn:hover = Hover-Zustand (heller, farbiger Rahmen)
.btn-danger = Variante für gefährliche Aktionen (Rot bei Hover)
inline-flex = Wie flex, aber das Element bleibt inline (Fließtext-kompatibel).
transition: all = ALLE Eigenschaften werden sanft animiert (Farbe, Hintergrund, etc.)
white-space: nowrap = Text bricht nicht um (Button bleibt einzeilig)
*/
.btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
font-family: var(--font-family);
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--color-text-muted);
background: transparent;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
cursor: pointer;
transition: all var(--transition-base);
white-space: nowrap;
}
/* Hover: Text wird heller, Hintergrund erscheint, Rahmen wird lila */
.btn:hover {
color: var(--color-text);
background: var(--color-surface-hover);
border-color: var(--color-border-active);
}
/* Spezial-Hover für "Leeren"-Button: wird rot statt lila */
.btn-danger:hover {
color: var(--color-danger);
border-color: var(--color-danger);
background: var(--color-danger-glow);
}
/* ─────────────────────────────────────────────
HAUPTLAYOUT
─────────────────────────────────────────────
Die App hat ein Zwei-Spalten-Layout:
[Toolbar | Canvas]
display: flex → Toolbar und Canvas werden nebeneinander angeordnet.
calc(100vh - var(--header-height)) → Höhe = Gesamtes Fenster MINUS Header.
vh = "viewport height" = Fensterhöhe in Prozent (100vh = 100% Höhe).
calc() erlaubt Berechnungen direkt in CSS.
*/
#app-main {
display: flex;
height: calc(100vh - var(--header-height));
}
/* ─────────────────────────────────────────────
TOOLBAR (Werkzeugleiste links)
─────────────────────────────────────────────
Die Toolbar enthält die Werkzeug-Buttons, unterteilt in
Sektionen ("Elemente" und "Simulation").
flex-direction: column → Buttons werden untereinander gestapelt (vertikal).
overflow-y: auto → Scrollbar erscheint wenn zu viele Buttons vorhanden.
min-width → Verhindert, dass die Toolbar schmaler wird als geplant.
*/
#toolbar {
width: var(--toolbar-width);
min-width: var(--toolbar-width);
background: var(--color-bg-secondary);
border-right: 1px solid var(--color-border);
padding: 12px 8px;
display: flex;
flex-direction: column;
gap: 16px;
overflow-y: auto;
}
/* Jede Sektion ("Elemente", "Simulation") ist ein vertikaler Flex-Container */
.toolbar-section {
display: flex;
flex-direction: column;
gap: 4px;
}
/* Sektions-Überschrift (z.B. "ELEMENTE", "SIMULATION")
text-transform: uppercase → Alles in GROSSBUCHSTABEN
letter-spacing: 0.08em → Buchstaben etwas weiter auseinander (typisch für Labels) */
.toolbar-label {
font-size: var(--font-size-xs);
font-weight: 600;
color: var(--color-text-dim);
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 0 6px 4px;
}
/*
Einzelner Werkzeug-Button in der Toolbar.
Icon oben, Text darunter (flex-direction: column).
border: transparent → Rahmen ist da, aber unsichtbar (damit sich die Größe
beim Aktivieren nicht ändert – der Rahmen wird nur eingefärbt).
*/
.tool-btn {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
padding: 8px 4px;
font-family: var(--font-family);
font-size: var(--font-size-xs);
font-weight: 500;
color: var(--color-text-muted);
background: transparent;
border: 1px solid transparent;
border-radius: var(--radius-md);
cursor: pointer;
transition: all var(--transition-base);
}
/* Hover: Hintergrund wird leicht sichtbar */
.tool-btn:hover {
color: var(--color-text);
background: var(--color-surface-hover);
}
/* Aktives Werkzeug: Lila Rahmen + Leuchteffekt (box-shadow mit glow-Farbe).
box-shadow: 0 0 12px → Weiches Leuchten rund um den Button. */
.tool-btn.active {
color: var(--color-primary);
background: rgba(108, 99, 255, 0.1);
border-color: var(--color-primary);
box-shadow: 0 0 12px var(--color-primary-glow);
}
/* margin-top: auto → Drückt die Info-Sektion nach unten (Flexbox-Trick:
auto-Margin "frisst" allen verfügbaren Platz auf) */
.toolbar-info {
margin-top: auto;
}
/* Statusanzeige unten in der Toolbar ("Werkzeug: Auswahl") */
.status-text {
font-size: var(--font-size-xs);
color: var(--color-text-dim);
padding: 8px;
background: var(--color-surface);
border-radius: var(--radius-sm);
line-height: 1.5;
}
/* Werkzeug-Name wird in der Primärfarbe hervorgehoben */
.status-text strong {
color: var(--color-primary);
}
/* ── Farbpalette für Transitionen ── */
.color-swatches {
display: flex;
gap: 6px;
padding: 8px;
justify-content: center;
}
.color-swatch {
width: 26px;
height: 26px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,0.15);
cursor: pointer;
transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.color-swatch:hover {
transform: scale(1.2);
border-color: rgba(255,255,255,0.5);
}
.color-swatch.active {
border-color: #fff;
box-shadow: 0 0 8px rgba(255,255,255,0.4);
}
/* ── Dateiverwaltungs-Liste ── */
.file-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
border-bottom: 1px solid rgba(255,255,255,0.05);
transition: background var(--transition-fast);
}
.file-item:last-child { border-bottom: none; }
.file-item:hover { background: rgba(255,255,255,0.04); }
.file-item.active { background: rgba(108, 99, 255, 0.1); }
.file-info { flex: 1; min-width: 0; }
.file-name {
font-size: 13px;
font-weight: 600;
color: var(--color-text);
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.file-meta {
font-size: 11px;
color: var(--color-text-muted);
}
.file-actions { display: flex; gap: 4px; margin-left: 8px; }
.file-btn {
width: 28px; height: 28px;
border: none; border-radius: 6px;
background: transparent;
color: var(--color-text-muted);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all var(--transition-fast);
}
.file-btn:hover { background: rgba(255,255,255,0.1); color: var(--color-text); }
.file-delete:hover { color: var(--color-danger); }
/* ─────────────────────────────────────────────
CANVAS (Zeichenfläche)
─────────────────────────────────────────────
Der Canvas-Container füllt den gesamten verbleibenden Platz neben der Toolbar.
flex: 1 → "Nimm den ganzen restlichen Platz ein"
(Die Toolbar hat eine feste Breite, der Canvas bekommt den Rest)
position: relative → Ermöglicht absolute Positionierung von Kindelementen
(Zoom-Buttons, Hinweistext, Simulations-Leiste)
radial-gradient → Sehr dezenter lila Lichtfleck in der Mitte (kaum sichtbar,
aber gibt dem dunklen Hintergrund etwas Tiefe)
*/
#canvas-container {
flex: 1;
position: relative;
overflow: hidden;
background:
radial-gradient(circle at 50% 50%, rgba(108, 99, 255, 0.03) 0%, transparent 70%),
var(--color-bg);
}
/* Das SVG-Element füllt den gesamten Container */
#petri-canvas {
width: 100%;
height: 100%;
display: block;
}
/*
GITTER-MUSTER (Grid) auf der Zeichenfläche.
Dieses Muster wird mit einem PSEUDO-ELEMENT erstellt (::before).
Ein Pseudo-Element ist ein "unsichtbares" HTML-Element, das nur über CSS existiert.
content: '' → Pflicht! Ohne content wird das Pseudo-Element nicht gerendert.
inset: 0 → Kurzform für top:0; right:0; bottom:0; left:0 (füllt den Container)
Das Gitter entsteht durch zwei überlagerte Liniengradienten:
- Einer zeichnet horizontale Linien (oben nach unten)
- Der zweite zeichnet vertikale Linien (90° gedreht)
background-size: 30px 30px → Gitterabstand von 30 Pixeln
pointer-events: none → Klicks gehen DURCH das Gitter hindurch zum SVG
z-index: 0 → Liegt hinter dem SVG (z-index: 1)
*/
#canvas-container::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(var(--color-border) 1px, transparent 1px),
linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
background-size: 30px 30px;
opacity: 0.25;
pointer-events: none;
z-index: 0;
}
/* SVG liegt über dem Gitter (z-index: 1 > z-index: 0) */
#petri-canvas {
position: relative;
z-index: 1;
}
/*
Hinweistext am unteren Rand der Zeichenfläche.
"Klicke auf ein Werkzeug links und dann auf die Zeichenfläche"
ZENTRIERUNGS-TRICK:
left: 50% + transform: translateX(-50%) = perfekte horizontale Zentrierung.
left: 50% schiebt den LINKEN Rand zur Mitte.
translateX(-50%) schiebt das Element um die Hälfte SEINER Breite zurück.
pointer-events: none → Der Text blockiert keine Klicks auf den Canvas.
*/
.canvas-hint {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
font-size: var(--font-size-sm);
color: var(--color-text-dim);
background: var(--color-surface);
border: 1px solid var(--color-border);
padding: 8px 18px;
border-radius: 20px;
pointer-events: none;
opacity: 0.7;
z-index: 10;
transition: opacity var(--transition-base);
}
/* Per JavaScript wird .hidden hinzugefügt → Text blendet sanft aus */
.canvas-hint.hidden {
opacity: 0;
}
/* Zoom-Bedienfeld oben rechts im Canvas.
backdrop-filter: blur(8px) → GLASEFFEKT: Der Hintergrund hinter dem Element
wird weichgezeichnet. Erzeugt einen modernen, halbtransparenten Look.
(Auch "Glasmorphismus" genannt – bekannt von macOS und iOS) */
.zoom-controls {
position: absolute;
top: 12px;
right: 12px;
display: flex;
align-items: center;
gap: 2px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 3px;
z-index: 10;
backdrop-filter: blur(8px);
}
/* Einzelner Zoom-Button (+/-) */
.zoom-btn {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
background: transparent;
border: none;
border-radius: var(--radius-sm);
color: var(--color-text-muted);
cursor: pointer;
transition: all var(--transition-fast);
}
.zoom-btn:hover {
background: var(--color-surface-hover);
color: var(--color-text);
}
/* :active = Während der Button gedrückt ist.
scale(0.92) = Button wird kurz 8% kleiner → "Klick-Effekt" */
.zoom-btn:active {
transform: scale(0.92);
}
/* Zoom-Prozentanzeige (z.B. "120%")
user-select: none → Text kann nicht markiert werden (stört bei Buttons) */
.zoom-level {
font-size: var(--font-size-xs);
font-weight: 600;
color: var(--color-text-muted);
min-width: 42px;
text-align: center;
user-select: none;
}
/* ─────────────────────────────────────────────
SVG-ELEMENT-STYLES
─────────────────────────────────────────────
Die Petri-Netz-Elemente werden als SVG (Scalable Vector Graphics)
gezeichnet. SVG-Elemente können genauso wie HTML-Elemente mit CSS
gestylt werden, nutzen aber andere Eigenschaften:
HTML-CSS: SVG-CSS:
background-color → fill (Füllfarbe)
border → stroke (Umrandungsfarbe)
border-width → stroke-width (Umrandungsdicke)
color → fill (Textfarbe)
box-shadow → filter: drop-shadow() (Schatteneffekt)
*/
/* ── Stellen (Places) – Die Kreise im Petri-Netz ── */
/* will-change: transform → Teilt dem Browser mit, dass dieses Element
häufig bewegt wird (Drag & Drop). Der Browser kann es dann auf der
GPU vorrendern für flüssigere Animationen. */
.petri-place {
cursor: pointer;
will-change: transform;
}
/* Der Kreis selbst: halbtransparente Lila-Füllung, lila Umrandung */
.petri-place circle.place-body {
fill: var(--color-place-fill);
stroke: var(--color-place);
stroke-width: 2;
transition: fill var(--transition-fast), stroke var(--transition-fast), filter var(--transition-fast);
}
/* Hover: Kreis wird etwas heller + bekommt ein weiches Leuchten (drop-shadow) */
.petri-place:hover circle.place-body {
fill: rgba(108, 99, 255, 0.15);
filter: drop-shadow(0 0 8px var(--color-primary-glow));
}
/* Ausgewählte Stelle: Gestrichelte Umrandung (stroke-dasharray)
stroke-dasharray: 5 3 → 5px Strich, 3px Lücke, 5px Strich, ... */
.petri-place.selected circle.place-body {
stroke-width: 2.5;
stroke-dasharray: 5 3;
filter: drop-shadow(0 0 10px var(--color-primary-glow));
}
/* Label unter der Stelle (z.B. "P1")
text-anchor: middle → SVG-Variante von text-align: center
pointer-events: none → Klicks gehen durch den Text hindurch zum Kreis */
.petri-place text.place-label {
fill: var(--color-text-muted);
font-size: 11px;
font-family: var(--font-family);
text-anchor: middle;
pointer-events: none;
}
/* ── Token – Gelbe Punkte in den Stellen ── */
/* Einzelner Token-Punkt mit gelbem Leuchteffekt */
.token-dot {
fill: var(--color-token);
filter: drop-shadow(0 0 4px rgba(255, 204, 68, 0.5));
}
/* Zahl statt Punkten (bei 5+ Token)
dominant-baseline: central → SVG-Variante von vertical-align: middle */
.token-count {
fill: var(--color-token);
font-size: 13px;
font-weight: 700;
font-family: var(--font-family);
text-anchor: middle;
dominant-baseline: central;
pointer-events: none;
}
/* ── Transitionen – Die Rechtecke im Petri-Netz ── */
.petri-transition {
cursor: pointer;
}
/* Rechteck mit türkiser Umrandung und leichter Füllung.
rx: 3 → Abgerundete Ecken (3px Radius, ähnlich border-radius in HTML) */
.petri-transition rect.transition-body {
fill: var(--color-transition-fill);
stroke: var(--color-transition);
stroke-width: 2;
rx: 3;
transition: fill var(--transition-fast), stroke var(--transition-fast), filter var(--transition-fast);
}
.petri-transition:hover rect.transition-body {
fill: rgba(0, 212, 170, 0.2);
filter: drop-shadow(0 0 8px var(--color-accent-glow));
}
/* Ausgewählte Transition: Gestrichelter Rand (wie bei Stellen) */
.petri-transition.selected rect.transition-body {
stroke-width: 2.5;
stroke-dasharray: 5 3;
filter: drop-shadow(0 0 10px var(--color-accent-glow));
}
/* SCHALTBARE Transition: Pulsierendes Leuchten zeigt an,
dass diese Transition genug Token hat und feuern kann.
animation: pulse-enabled → Endlosschleife (infinite), 1.5 Sekunden pro Zyklus */
.petri-transition.enabled rect.transition-body {
fill: rgba(0, 212, 170, 0.3);
animation: pulse-enabled 1.5s ease-in-out infinite;
}
.petri-transition text.transition-label {
fill: var(--color-text-muted);
font-size: 11px;
font-family: var(--font-family);
text-anchor: middle;
pointer-events: none;
}
/*
@keyframes = Definiert eine CSS-Animation.
Die Animation läuft von 0% bis 100% und beschreibt
wie sich die Eigenschaft über die Zeit ändern soll.
Hier: Der Leuchteffekt (drop-shadow) pulsiert zwischen
klein (6px) und groß (16px) – dadurch "atmet" die Transition.
*/
@keyframes pulse-enabled {
0%, 100% { filter: drop-shadow(0 0 6px var(--color-accent-glow)); }
50% { filter: drop-shadow(0 0 16px rgba(0, 212, 170, 0.5)); }
}
/* ── Kanten (Arcs) – Pfeile zwischen Stellen und Transitionen ── */
/* Normale Kante: Grauer Pfeil.
fill: none → Nur die Linie, keine Fuellung (bei SVG-Pfaden wichtig)
marker-end: url(#arrowhead) → Pfeilspitze am Ende der Linie. */
.petri-arc {
stroke: var(--color-arc);
stroke-width: 1.8;
fill: none;
marker-end: url(#arrowhead);
transition: stroke var(--transition-fast);
}
/* Unsichtbarer dicker Klick-Bereich fuer einfacheres Selektieren */
.arc-hit {
stroke: transparent;
stroke-width: 14;
fill: none;
cursor: pointer;
}
/* Hover: Kante wird heller und etwas dicker */
.arc-group:hover .petri-arc {
stroke: var(--color-text);
stroke-width: 2.2;
}
/* Selektierte Kante (fuer Delete) */
.arc-selected .petri-arc {
stroke: var(--color-primary);
stroke-width: 2.5;
filter: drop-shadow(0 0 4px var(--color-primary-glow));
}
/* Vorschau-Kante (während man eine neue Kante zeichnet).
Gestrichelt (stroke-dasharray) und halbtransparent (opacity: 0.6).
Folgt der Maus und verschwindet beim Loslassen. */
.temp-arc {
stroke: var(--color-primary);
stroke-width: 1.5;
stroke-dasharray: 6 4;
fill: none;
marker-end: url(#arrowhead);
pointer-events: none;
opacity: 0.6;
}
/* Inhibitor-Kanten: Rot und gestrichelt.
Blockieren eine Transition, wenn die verbundene Stelle Token hat.
!important → Überschreibt den normalen Pfeil-Marker mit einem Kreis-Marker. */
.inhibitor-arc {
stroke: var(--color-danger);
stroke-dasharray: 6 3;
marker-end: url(#inhibitor-end) !important;
}
.inhibitor-arc:hover {
stroke: var(--color-danger);
}
/* Kantengewicht-Zahl (wird nur angezeigt wenn Gewicht > 1)
drop-shadow mit schwarz → Lesbar auch auf hellen Kanten */
.arc-weight {
fill: var(--color-token);
font-size: 12px;
font-weight: 700;
font-family: var(--font-family);
text-anchor: middle;
pointer-events: none;
filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.8));
}
/* Unsichtbare klickbare Fläche um die Kante (größer als die dünne Linie) */
.arc-group {
cursor: pointer;
}
/* ─────────────────────────────────────────────
SIMULATIONS-STEUERUNG
─────────────────────────────────────────────
Die Steuerleiste unten am Canvas enthält:
Play/Pause, Step, Stop, Speed-Regler, Record.
Schwebt über dem Canvas (position: absolute + transform-Zentrierung).
Glaseffekt durch backdrop-filter: blur() und halbtransparenten Hintergrund.
box-shadow erzeugt einen dezenten Schatten für Tiefenwirkung.
*/
.sim-controls {
position: absolute;
bottom: 14px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 8px;
background: rgba(26, 26, 46, 0.92);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 6px 12px;
z-index: 10;
backdrop-filter: blur(12px);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}
/* Button-Gruppe innerhalb der Steuerleiste */
.sim-group {
display: flex;
align-items: center;
gap: 4px;
}
/* "+" Selektor: Wenn eine .sim-group DIREKT nach einer anderen kommt,
bekommt sie links einen vertikalen Trennstrich (wie ein | Separator) */
.sim-group + .sim-group {
padding-left: 8px;
border-left: 1px solid var(--color-border);
}
/* Einzelner Simulations-Button (Play, Step, Stop) */
.sim-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
min-width: 34px;
height: 34px;
padding: 0 8px;
background: transparent;
border: 1px solid transparent;
border-radius: var(--radius-sm);
color: var(--color-text-muted);
font-family: var(--font-family);
font-size: var(--font-size-xs);
font-weight: 600;
cursor: pointer;
transition: all var(--transition-fast);
}
.sim-btn:hover {
background: var(--color-surface-hover);
color: var(--color-text);
border-color: var(--color-border);
}
/* Play-Button im aktiven Zustand: Türkis hervorgehoben */
.sim-btn.active {
color: var(--color-accent);
background: rgba(0, 212, 170, 0.1);
border-color: var(--color-accent);
}
/* Record-Button: Standardmäßig dezent */
.sim-btn-record {
color: var(--color-text-dim);
}
/* Hover: Wird rot (signalisiert "Aufnahme") */
.sim-btn-record:hover {
color: var(--color-danger);
}
/* Während der Aufnahme: Rot mit pulsierendem Ring-Effekt.
Die Animation erzeugt einen sich ausbreitenden, verblassenden Kreis
um den Button herum (box-shadow von 0px auf 6px, Opacity von 0.3 auf 0). */
.sim-btn-record.recording {
color: var(--color-danger);
background: var(--color-danger-glow);
border-color: var(--color-danger);
animation: pulse-record 1.2s ease-in-out infinite;
}
@keyframes pulse-record {
0%, 100% { box-shadow: 0 0 0 0 rgba(255, 68, 102, 0.3); }
50% { box-shadow: 0 0 0 6px rgba(255, 68, 102, 0); }
}
/* Beschriftung neben dem Slider ("Speed", "2.0s") */
.sim-label {
font-size: var(--font-size-xs);
color: var(--color-text-dim);
font-weight: 500;
white-space: nowrap;
user-select: none;
}
/* Speed-Regler (Range-Input)
-webkit-appearance: none → Standard-Browser-Styling entfernen,
damit wir den Slider komplett selbst gestalten können.
Das ist nötig, weil jeder Browser Range-Inputs anders darstellt. */
.sim-slider {
width: 80px;
height: 4px;
-webkit-appearance: none;
appearance: none;
background: var(--color-border);
border-radius: 2px;
outline: none;
cursor: pointer;
}
/* Der runde "Griff" (Thumb) des Sliders.
::-webkit-slider-thumb → Pseudo-Element speziell für Webkit-Browser (Chrome, Safari).
border-radius: 50% → Perfekter Kreis */
.sim-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--color-primary);
cursor: pointer;
border: 2px solid var(--color-bg);
box-shadow: 0 0 6px var(--color-primary-glow);
}
/* Statusanzeige ("Schritt 5: T1, T3") */
.sim-status {
font-size: var(--font-size-xs);
color: var(--color-accent);
font-weight: 600;
min-width: 40px;
}
/* Gelber Animationspunkt der während der Simulation
entlang der Kanten fliegt (Token-Transport) */
.token-flow {
fill: var(--color-token);
filter: drop-shadow(0 0 6px rgba(255, 204, 68, 0.8));
pointer-events: none;
}
/* Vertikaler Trennstrich im Header (zwischen den Button-Gruppen) */
.header-divider {
width: 1px;
height: 24px;
background: var(--color-border);
margin: 0 4px;
}
/* ─────────────────────────────────────────────
MODALS (Popup-Dialogfenster)
─────────────────────────────────────────────
Ein Modal ist ein Dialog, der über dem gesamten Inhalt liegt.
Es besteht aus zwei Teilen:
1. OVERLAY (.modal-overlay) = Dunkler, verschwommener Hintergrund
- position: fixed + inset: 0 → Füllt das GESAMTE Fenster
- z-index: 1000 → Liegt über ALLEM anderen
- display: none → Standardmäßig versteckt
- display: flex (bei .open) → Sichtbar + zentriert den Dialog
2. DIALOG (.modal) = Der eigentliche Inhalt (weißer Kasten)
*/
.modal-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 1000;
background: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(6px);
align-items: center;
justify-content: center;
}
/* JavaScript fügt .open hinzu → Modal wird sichtbar */
.modal-overlay.open {
display: flex;
}
/* Der Dialog selbst.
animation: modal-in → Einblend-Animation (fährt von unten hoch + wird sichtbar) */
.modal {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
width: 90%;
max-width: 520px;
max-height: 85vh;
overflow-y: auto;
box-shadow: 0 16px 64px rgba(0, 0, 0, 0.5);
animation: modal-in 200ms ease;
}
/* Einblend-Animation: Kommt von unten (16px) und wächst leicht (97% → 100%).
from/to ist die Kurzform von 0%/100% bei @keyframes. */
@keyframes modal-in {
from { opacity: 0; transform: translateY(16px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Modal-Kopfzeile: Titel links, Schließen-Button rechts */
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 24px;
border-bottom: 1px solid var(--color-border);
}
.modal-header h2 {
font-size: 1.1rem;
font-weight: 600;
color: var(--color-text);
}
/* ✕-Button zum Schließen */
.modal-close {
background: none;
border: none;
color: var(--color-text-muted);
font-size: 1.5rem;
cursor: pointer;
padding: 0 4px;
line-height: 1;
transition: color var(--transition-fast);
}
.modal-close:hover {
color: var(--color-text);
}
/* Modal-Inhalt: Der scrollbare Bereich mit Text, Formularen etc. */
.modal-body {
padding: 24px;
}
.modal-body h3 {
font-size: var(--font-size-base);
font-weight: 600;
color: var(--color-primary);
margin-top: 18px;
margin-bottom: 8px;
}
.modal-body h3:first-child {
margin-top: 0;
}
.modal-body p {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
line-height: 1.65;
margin-bottom: 6px;
}
.modal-body a {
color: var(--color-primary);
text-decoration: none;
}
.modal-body a:hover {
text-decoration: underline;
}
.modal-body code {
background: var(--color-bg);
padding: 1px 5px;
border-radius: 3px;
font-size: var(--font-size-xs);
}
/* ─────────────────────────────────────────────
FORMULAR-ELEMENTE
─────────────────────────────────────────────
Styles für Input-Felder, Textareas und Checkboxen
im Kontaktformular und Recording-Config-Modal.
*/
.form-group {
margin-bottom: 16px;
}
.form-group label {
display: block;
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--color-text-muted);
margin-bottom: 6px;
}
/* Alle Text-/E-Mail-Inputs und Textareas im gleichen Stil.
outline: none → Standard-Browser-Fokusrahmen entfernen (wir machen unseren eigenen) */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
width: 100%;
padding: 10px 14px;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-text);
font-family: var(--font-family);
font-size: var(--font-size-sm);
transition: border-color var(--transition-fast);
outline: none;
}
/* Fokus-Zustand: Lila Rahmen + lila Leuchtring.
box-shadow: 0 0 0 3px → Erzeugt einen farbigen Ring um das Element
(wird häufig statt outline verwendet, weil es border-radius respektiert) */
.form-group input:focus,
.form-group textarea:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-primary-glow);
}
/* resize: vertical → Textarea kann nur vertikal vergrößert werden (nicht horizontal) */
.form-group textarea {
resize: vertical;
min-height: 100px;
}
/* Checkbox + Label nebeneinander.
align-items: flex-start → Checkbox bleibt oben, wenn der Text umbricht */
.form-check {
display: flex;
align-items: flex-start;
gap: 8px;
}
/* accent-color → Modernes CSS zum Färben der Browser-Checkbox (Lila statt Blau) */
.form-check input[type="checkbox"] {
margin-top: 3px;
accent-color: var(--color-primary);
}
.form-check label {
display: inline;
font-size: var(--font-size-xs);
line-height: 1.4;
}
/* Hauptaktion-Button ("Nachricht senden", "Aufnahme starten").
Volle Breite (width: 100%), lila Hintergrund, weißer Text. */
.btn-primary {
width: 100%;
padding: 12px;
background: var(--color-primary);
color: white;
border: none;
border-radius: var(--radius-sm);
font-family: var(--font-family);
font-size: var(--font-size-sm);
font-weight: 600;
cursor: pointer;
transition: all var(--transition-fast);
}
/* Hover: Heller + Leuchteffekt */
.btn-primary:hover {
background: var(--color-primary-hover);
box-shadow: 0 0 16px var(--color-primary-glow);
}
/* Dropdown-Auswahl (z.B. FPS, Auflösung) */
.form-group select {
width: 100%;
padding: 10px 14px;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-text);
font-family: var(--font-family);
font-size: var(--font-size-sm);
outline: none;
cursor: pointer;
}
.form-group select:focus {
border-color: var(--color-primary);
}
/* Transitions-Checkliste im Recording-Modal.
Zeigt alle Transitionen mit Checkboxen, damit man einzelne ausschließen kann. */
.rec-transition-list {
max-height: 200px;
overflow-y: auto;
margin-top: 8px;
}
.rec-transition-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border-radius: var(--radius-sm);
transition: background var(--transition-fast);
}
.rec-transition-item:hover {
background: var(--color-bg);
}
.rec-transition-item input[type="checkbox"] {
accent-color: var(--color-accent);
}
.rec-transition-item label {
font-size: var(--font-size-sm);
color: var(--color-text);
cursor: pointer;
}
/* Kleines türkises Quadrat neben dem Transitions-Namen */
.rec-transition-item .rec-t-badge {
display: inline-block;
width: 10px;
height: 10px;
background: var(--color-transition);
border-radius: 2px;
}
/* Hinweis wenn keine Transitionen vorhanden */
.rec-empty {
color: var(--color-text-dim);
font-size: var(--font-size-xs);
text-align: center;
padding: 16px;
}
/* ─────────────────────────────────────────────
RESPONSIVE DESIGN
─────────────────────────────────────────────
@media (max-width: 640px) = "Wenn der Bildschirm schmaler als 640px ist"
→ Wird auf kleinen Bildschirmen (Smartphones, schmale Fenster) aktiv.
Anpassungen:
- Toolbar wird schmaler (60px statt 100px)
- Button-Texte werden versteckt (nur Icons bleiben sichtbar)
- Toolbar-Labels ("Elemente", "Simulation") werden versteckt
Das nennt sich "Mobile First" bzw. "Responsive Design":
Die App passt sich automatisch an die Bildschirmgröße an.
*/
@media (max-width: 640px) {
#toolbar {
width: 60px;
min-width: 60px;
padding: 8px 4px;
}
/* Auf Mobilgeräten: Nur Icons, kein Text */
.tool-btn span,
.toolbar-label,
.toolbar-info {
display: none;
}
.tool-btn {
padding: 10px 4px;
}
/* Header-Buttons: Nur Icons, kein Text */
.btn span {
display: none;
}
.btn {
padding: 7px 8px;
}
}