diff --git a/static/css/mindmap.css b/static/css/mindmap.css index 9fa9dcc..c1b7a4f 100644 --- a/static/css/mindmap.css +++ b/static/css/mindmap.css @@ -250,4 +250,210 @@ .dark .mindmap-tooltip { background: rgba(30, 41, 59, 0.9); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); +} + +/* Mindmap Styles + Stylesheets für die interaktive Mindmap-Funktionalität + Umfasst Bearbeitungsmodus, CRUD-Funktionen und UI-Elemente +*/ + +/* Bearbeitungsmodus-Indikator */ +#cy.editing-mode { + background: rgba(245, 158, 11, 0.1) !important; +} + +/* Edge-Erstellungsmodus */ +#cy.edge-creation-mode { + cursor: crosshair !important; +} + +/* Aktivierter Knoten */ +#cy .edge-source { + border-color: #f59e0b !important; + border-width: 4px !important; + border-style: dashed !important; +} + +/* Node-Dialog Overlay */ +.node-dialog-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.5); + backdrop-filter: blur(3px); + z-index: 1900; +} + +/* Kontext-Menü */ +.context-menu { + position: absolute; + z-index: 2000; + background: rgba(15, 23, 42, 0.95); + border-radius: 0.5rem; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); + min-width: 180px; + border: 1px solid rgba(255, 255, 255, 0.1); + backdrop-filter: blur(10px); + overflow: hidden; +} + +.context-menu-header { + padding: 0.5rem 1rem; + color: rgba(255, 255, 255, 0.7); + font-size: 0.8rem; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); +} + +.context-menu-item { + padding: 0.5rem 1rem; + display: flex; + align-items: center; + gap: 0.5rem; + color: rgba(255, 255, 255, 0.9); + cursor: pointer; + transition: all 0.2s ease; +} + +.context-menu-item:hover { + background: rgba(255, 255, 255, 0.1); +} + +/* Benachrichtigungen */ +#notification-container { + position: fixed; + top: 1rem; + right: 1rem; + z-index: 2000; + max-width: 400px; + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.notification { + padding: 1rem; + border-radius: 0.5rem; + background: rgba(15, 23, 42, 0.95); + color: white; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); + display: flex; + align-items: center; + gap: 0.75rem; + transform: translateX(120%); + transition: transform 0.3s ease-out; + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.1); +} + +.notification i { + font-size: 1.25rem; +} + +.notification-success { + background: rgba(16, 185, 129, 0.9); +} + +.notification-error { + background: rgba(239, 68, 68, 0.9); +} + +.notification-warning { + background: rgba(245, 158, 11, 0.9); +} + +.notification-info { + background: rgba(59, 130, 246, 0.9); +} + +/* CRUD-Aktionen Styles */ +.crud-panel { + transition: transform 0.3s ease, opacity 0.3s ease; +} + +.crud-panel.hidden { + opacity: 0; + transform: translateY(50px); + pointer-events: none; +} + +/* Tooltip für CRUD-Buttons */ +.crud-button::after { + content: attr(data-tooltip); + position: absolute; + bottom: 100%; + left: 50%; + transform: translateX(-50%); + background: rgba(15, 23, 42, 0.95); + padding: 0.3rem 0.6rem; + border-radius: 0.4rem; + font-size: 0.7rem; + white-space: nowrap; + opacity: 0; + transition: opacity 0.2s ease; + pointer-events: none; + margin-bottom: 5px; +} + +.crud-button:hover::after { + opacity: 1; +} + +/* Visueller Indikator für den Bearbeitungsmodus */ +.edit-mode-indicator { + animation: pulse-warning 2s infinite; + box-shadow: 0 0 10px rgba(245, 158, 11, 0.5); +} + +@keyframes pulse-warning { + 0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7); } + 70% { box-shadow: 0 0 0 10px rgba(245, 158, 11, 0); } + 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); } +} + +/* Verbesserter Info-Panel */ +.info-panel { + transition: all 0.3s ease; +} + +.info-title { + position: relative; +} + +.info-title::after { + content: ''; + position: absolute; + bottom: -5px; + left: 0; + width: 50px; + height: 3px; + background: linear-gradient(90deg, #60a5fa, #8b5cf6); + border-radius: 2px; +} + +.info-content { + max-height: 300px; + overflow-y: auto; +} + +/* Anpassungen für kleinere Bildschirme */ +@media (max-width: 768px) { + .crud-panel { + bottom: 1rem; + left: 1rem; + right: 1rem; + transform: none; + justify-content: space-around; + } + + .info-panel { + left: 1rem; + width: calc(100% - 2rem); + max-width: none; + } + + .control-panel { + right: 1rem; + } } \ No newline at end of file