* { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, Segoe UI, Arial, sans-serif; color: #1c2530; background: #f4f6f8; } a { color: #2563eb; text-decoration: none; } a:hover { text-decoration: underline; } .app { display: flex; flex-direction: column; min-height: 100vh; } /* --- Top bar --- */ .topbar { display: flex; align-items: center; gap: 16px; padding: 0 16px; height: 52px; flex-shrink: 0; background: #1c2530; color: #fff; border-bottom: 1px solid #2f3a4a; } .menu-toggle { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 32px; height: 32px; padding: 0; background: none; border: none; cursor: pointer; } .menu-toggle span { display: block; height: 2px; background: #cbd5e1; border-radius: 1px; } .menu-toggle:hover span { background: #fff; } .topbar-title { font-weight: 600; } .topbar-user { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 0.9em; color: #cbd5e1; } .topbar-user .link-button { color: #cbd5e1; } .topbar-user .link-button:hover { color: #fff; } .body-row { flex: 1; display: flex; min-height: 0; position: relative; } /* --- Left menu --- */ .menu { position: absolute; top: 0; left: 0; width: 240px; max-height: 100%; background: #1c2530; color: #cbd5e1; display: none; flex-direction: column; overflow-y: auto; box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3); z-index: 20; } .menu.open { display: flex; } .menu > ul { list-style: none; margin: 0; padding: 8px 0 0; } .menu li { margin: 2px 0; } :is(.menu, .menu-group-children) a, :is(.menu, .menu-group-children) .menu-group, :is(.menu, .menu-group-children) .menu-group-toggle { display: block; width: 100%; text-align: left; padding: 6px 16px; color: #cbd5e1; background: none; border: none; font: inherit; cursor: pointer; } :is(.menu, .menu-group-children) .menu-group { color: #8fa3bf; font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.03em; padding-top: 12px; } :is(.menu, .menu-group-children) .menu-group-toggle { color: #8fa3bf; font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.03em; padding-top: 12px; padding-right: 28px; position: relative; } :is(.menu, .menu-group-children) .menu-group-toggle::after { content: "\25B8"; /* ▸ - points toward the flyout, which always opens to that side */ position: absolute; right: 16px; } :is(.menu, .menu-group-children) li.has-children.expanded > .menu-group-toggle { background: #2f3a4a; color: #fff; } :is(.menu, .menu-group-children) a:hover, :is(.menu, .menu-group-children) .menu-group-toggle:hover { background: #2f3a4a; color: #fff; text-decoration: none; } /* * Submenus fly out to the side as their own floating, independently * scrollable panel instead of an inline accordion - both the live * `LIST MENU;` tree and the admin-only "Space data" group (one child * per space) can get arbitrarily large, and an inline accordion would * either push the rest of the menu far off-screen or need its own * nested scroll region. * * Positioned in JS (app.js positionMenuFlyout()) since it has to react to * the trigger's on-screen position and the viewport size, and is * reparented to on open so it isn't clipped by an ancestor's * overflow:auto (.menu above; overflow-x implicitly becomes 'auto' - * i.e. clipping - as soon as overflow-y is anything but 'visible'). */ .menu-group-children { display: none; position: fixed; min-width: 200px; max-width: 320px; background: #1c2530; box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3); overflow-y: auto; z-index: 30; } .menu-group-children.open { display: block; } .menu-group-children ul { list-style: none; margin: 0; padding: 6px 0; } /* --- Content area --- */ .content { flex: 1; display: flex; flex-direction: column; min-width: 0; } .breadcrumb { padding: 12px 24px; background: #fff; border-bottom: 1px solid #e2e8f0; font-size: 0.9em; color: #64748b; } .breadcrumb-admin { border-bottom: 3px solid #dc2626; } .suspend-banner { flex-shrink: 0; padding: 8px 24px; background: #dc2626; color: #fff; font-size: 0.9em; font-weight: 600; text-align: center; } .breadcrumb .sep { margin: 0 6px; } .page-body { padding: 24px; flex: 1; } /* --- Common elements --- */ .link-button { background: none; border: none; padding: 0; color: #2563eb; cursor: pointer; font: inherit; } .link-button:hover { text-decoration: underline; } table { border-collapse: collapse; width: 100%; background: #fff; } th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid #e2e8f0; } th { background: #f8fafc; font-weight: 600; } .card { background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; padding: 24px; max-width: 480px; } form.inline { display: inline; } label { display: block; margin: 12px 0 4px; font-weight: 600; } input[type=text], input[type=email], input[type=password] { width: 100%; padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px; font: inherit; } button, .button { display: inline-block; padding: 8px 16px; background: #2563eb; color: #fff; border: none; border-radius: 4px; cursor: pointer; font: inherit; } button.secondary, .button.secondary { background: #64748b; } button.danger, .button.danger { background: #dc2626; } .badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.8em; font-weight: 600; } .badge.ok { background: #dcfce7; color: #166534; } .badge.off { background: #fee2e2; color: #991b1b; } .badge.pending { background: #fef9c3; color: #854d0e; } .flash { padding: 10px 16px; border-radius: 4px; margin-bottom: 16px; } .flash.success { background: #dcfce7; color: #166534; } .flash.error { background: #fee2e2; color: #991b1b; } /* --- Spaces / dynamic field rows --- */ select { padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px; font: inherit; background: #fff; } .space-form { max-width: 720px; } .readonly-value { margin: 0; padding: 8px; border: 1px solid #e2e8f0; border-radius: 4px; background: #f8fafc; color: #64748b; white-space: pre-wrap; } /* --- Settings popup (language + timezone, src/views/layout.php) --- */ .settings-dialog { border: none; border-radius: 6px; padding: 24px; width: 320px; max-width: calc(100vw - 32px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); } .settings-dialog::backdrop { background: rgba(0, 0, 0, 0.4); } .settings-dialog h2 { margin-top: 0; } .settings-dialog select { width: 100%; } .dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; } /* --- Scripts / Libraries source editing --- */ .code-textarea { width: 100%; min-height: 320px; font-family: "SF Mono", Consolas, monospace; padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px; resize: vertical; } .field-row { position: relative; border: 1px solid #e2e8f0; border-radius: 6px; padding: 16px; margin: 12px 0; } .field-row label { margin-top: 8px; } .field-row label:first-of-type { margin-top: 0; } .field-ref-only { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #e2e8f0; } .field-remove { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; padding: 0; line-height: 1; border-radius: 999px; } .field-actions { display: flex; gap: 8px; align-items: center; } .field-description-form { display: flex; gap: 8px; align-items: center; } .field-description-form input[type=text] { width: auto; } .field-default-form, .field-nullability-form { display: flex; gap: 8px; align-items: center; } .field-default-form input[type=text], .field-nullability-form input[type=text] { width: auto; } .login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #f4f6f8; } /* --- CLI --- */ .field-log-value { white-space: pre-wrap; } .cli-output { background: #0f172a; color: #e2e8f0; font-family: "SF Mono", Consolas, monospace; padding: 16px; border-radius: 6px; height: 420px; overflow-y: auto; white-space: pre-wrap; } .cli-output .line-error { color: #f87171; } .cli-output .line-message { color: #fbbf24; } .cli-output .line-comment { color: #64748b; } .cli-output .line-meta { color: #38bdf8; } .cli-output .line-echo { color: #94a3b8; } .cli-input { width: 100%; font-family: "SF Mono", Consolas, monospace; padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px; margin-top: 12px; } /* --- Workflow editor/viewer --- */ .workflow-toolbar { display: flex; gap: 8px; margin-bottom: 8px; } .workflow-toolbar button.active { background: #1d4ed8; } .workflow-status { min-height: 1.4em; margin-bottom: 8px; font-size: 0.9em; } .workflow-status.success { color: #166534; } .workflow-status.error { color: #991b1b; } .workflow-body { display: flex; gap: 16px; align-items: flex-start; } .workflow-canvas-wrap { flex: 1; max-width: 100%; height: 600px; overflow: auto; border: 1px solid #e2e8f0; border-radius: 6px; background: #fff; } .workflow-canvas { display: block; } .workflow-state-rect { fill: #eff6ff; stroke: #2563eb; stroke-width: 1.5; cursor: grab; } .workflow-state.selected .workflow-state-rect { stroke-width: 3; } .workflow-state.active .workflow-state-rect { fill: #fef9c3; stroke: #ca8a04; } .workflow-state.connect-source .workflow-state-rect { stroke-dasharray: 4 3; } .workflow-state-label { font-size: 13px; fill: #1c2530; pointer-events: none; } .workflow-state-badge { font-size: 9px; letter-spacing: 0.04em; fill: #64748b; pointer-events: none; } .workflow-flow-line { stroke: #64748b; stroke-width: 1.5; fill: none; } .workflow-flow.selected .workflow-flow-line { stroke: #2563eb; stroke-width: 2.5; } .workflow-flow.allowed .workflow-flow-line { stroke: #ca8a04; stroke-width: 3.5; } .workflow-flow-hit { stroke: transparent; stroke-width: 14; fill: none; } /* Only actually clickable: every flow in editor mode (selectable), but only a currently-allowed flow in viewer mode (triggerable) - see workflow-editor.js's renderFlows(), which only attaches a mousedown handler in those same two cases. An unconditional cursor:pointer here would mislead a viewer-mode user into thinking every flow line is clickable. */ .workflow-mode-editor .workflow-flow-hit { cursor: pointer; } .workflow-mode-viewer .workflow-flow.allowed .workflow-flow-hit { cursor: pointer; } .workflow-flow-handle { fill: #fff; stroke: #2563eb; stroke-width: 2; cursor: grab; } .workflow-arrowhead { fill: #64748b; } .workflow-flow.selected .workflow-arrowhead { fill: #2563eb; } .workflow-flow.allowed .workflow-arrowhead { fill: #ca8a04; } .workflow-flow-label { font-size: 11px; fill: #475569; } .workflow-panel { width: 280px; flex-shrink: 0; border: 1px solid #e2e8f0; border-radius: 6px; padding: 16px; background: #fff; } .workflow-panel h3 { margin-top: 0; } .workflow-panel-hint { color: #64748b; font-size: 0.9em; } .workflow-panel textarea.workflow-gui-meta { width: 100%; font-family: "SF Mono", Consolas, monospace; font-size: 0.85em; padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px; } .workflow-field-error { color: #991b1b; font-size: 0.85em; min-height: 1.2em; } .workflow-panel h4 { margin: 16px 0 4px; font-size: 0.95em; } .workflow-script-row { display: flex; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px solid #e2e8f0; flex-wrap: wrap; } .workflow-script-name { flex: 1; font-size: 0.9em; } .workflow-script-row button { padding: 4px 8px; font-size: 0.85em; } /* --- Record-detail tabs (Data/Workflow/Log) - admin/space_records/edit.php --- */ .tab-strip { display: flex; gap: 4px; border-bottom: 1px solid #e2e8f0; margin: 16px 0; } .tab-button { background: none; border: 1px solid transparent; border-bottom: none; border-radius: 6px 6px 0 0; padding: 8px 16px; cursor: pointer; color: #64748b; font-size: 0.95em; } .tab-button:hover { color: #1e293b; } .tab-button.active { color: #1e293b; font-weight: bold; border-color: #e2e8f0; background: #f8fafc; } [data-tab-panel]:not([data-tab-panel="data"]) { display: none; } /* --- Mehrere Backend-Benutzer pro Login --- */ .muted { color: #64748b; font-weight: normal; font-size: 0.85em; } .card.user-group { max-width: none; margin-bottom: 20px; } .user-group-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; } .user-group-header h2 { margin: 0; } .user-group-actions { display: flex; align-items: center; gap: 8px; } .account-switch select { padding: 4px 8px; font-size: 0.9em; } .account-option { display: flex; align-items: center; gap: 8px; font-weight: normal; padding: 8px 0; border-bottom: 1px solid #e2e8f0; }