/* Startup wizard + reusable server file/folder browser. Global (not component-scoped) because the browser + folder-picker dialog are separate components and the dialog teleports onto . Uses the workbench design tokens (--c-*, --f-*, --fz-*) — the overlay is registered in forge-workbench.css so the tokens resolve here and on the teleported dialog. */ /* ── Overlay backdrop ───────────────────────────────────────────────── */ .workspace-gate-overlay { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; overflow: auto; font-family: var(--f-sans); color: var(--c-text); background: radial-gradient(900px 500px at 50% -5%, rgba(78, 201, 176, .08), transparent 60%), rgba(8, 10, 14, .82); backdrop-filter: blur(7px) saturate(120%); } /* ── Wizard card ────────────────────────────────────────────────────── */ .startup-wizard { width: min(660px, 96vw); } .startup-wizard__header { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.25rem; } /* "Abbrechen" — only shown in switch-project mode (a project is already open). */ .startup-wizard__close { margin-left: auto; align-self: flex-start; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--c-border-strong); background: transparent; color: var(--c-text-dim); cursor: pointer; transition: background .12s, color .12s, border-color .12s; } .startup-wizard__close:hover { background: var(--c-bg-hover); color: var(--c-text); border-color: var(--c-accent); } /* Compact, icon-only context help in the header (opens the active tab's DevOpsKB article). */ .startup-wizard__header .kb-pop { margin-left: auto; align-self: flex-start; } /* When the cancel (close) button is also present it follows the help button directly — drop its own auto-margin so the two sit together at the right instead of splitting the free space. */ .startup-wizard__header .kb-pop + .startup-wizard__close { margin-left: 0; } .startup-wizard__help { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; background: transparent; border: none; border-radius: 8px; color: var(--c-text-mute); cursor: pointer; transition: background .12s, color .12s; } .startup-wizard__help:hover { background: var(--c-bg-hover); color: var(--c-accent); } .startup-wizard__brand { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--c-accent); background: var(--c-accent-soft); border: 1px solid rgba(78, 201, 176, .35); } .startup-wizard__title h1 { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em; margin: 0; color: #fff; } .startup-wizard__title p { margin: .1rem 0 0; font-size: var(--fz-md); color: var(--c-text-dim); } .startup-wizard__tabs { display: flex; gap: .25rem; padding: .25rem; background: var(--c-bg-tool); border: 1px solid var(--c-border); border-radius: 10px; margin-bottom: 1rem; } .startup-wizard__tabs button { flex: 1 1 0; min-width: 0; background: transparent; border: none; color: var(--c-text-dim); padding: .5rem .55rem; border-radius: 7px; cursor: pointer; font-weight: 600; font-size: var(--fz-sm); font-family: var(--f-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .12s, color .12s; } .startup-wizard__tabs button:hover { color: var(--c-text); } .startup-wizard__tabs button.is-active { background: var(--c-bg-active); color: #fff; box-shadow: inset 0 0 0 1px var(--c-border-strong); } .startup-wizard__card { background: var(--c-bg-elev); border: 1px solid var(--c-border-strong); border-radius: 12px; padding: 1.25rem; box-shadow: 0 24px 70px rgba(0, 0, 0, .5); /* Fixed height so switching tabs (Open / Recent / New) doesn't make the card jump. The variable content inside fills this space via flex and scrolls internally. */ height: min(480px, 72vh); display: flex; flex-direction: column; } .startup-wizard__manual { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--c-border); } /* ── "Anmeldung erforderlich" gate (Editor:RequireAuthentication) ───── */ /* Reuses the wizard card + .newproj-gate layout, but the message is short, so let the card size to its content instead of the wizard's fixed tab-stable height. */ .wizard-auth-required .startup-wizard__card { height: auto; } .wizard-auth-required h2 { margin: 0; font-size: 1.25rem; font-weight: 700; color: #fff; } .startup-wizard__card label { display: block; font-size: var(--fz-sm); color: var(--c-text-dim); margin-bottom: .45rem; } .startup-wizard code { font-family: var(--f-mono); color: var(--c-accent); } .startup-wizard__row { display: flex; gap: .5rem; } .startup-wizard__row input { flex: 1; } .startup-wizard__hint { margin: 1rem 0 0; font-size: var(--fz-sm); color: var(--c-text-mute); } .startup-wizard__empty { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; color: var(--c-text-mute); padding: 1.75rem .5rem; text-align: center; font-size: var(--fz-md); } .startup-wizard__error { margin-top: .85rem; padding: .6rem .75rem; border-radius: 8px; background: var(--rz-danger-light, rgba(239, 95, 107, .14)); border: 1px solid rgba(239, 95, 107, .4); color: var(--c-error); font-size: var(--fz-sm); } /* ── Inputs (shared) ────────────────────────────────────────────────── */ /* Scoped to text/password so checkboxes don't pick up full-width text-field chrome. */ .startup-wizard input[type="text"], .newproj-field input[type="text"], .newproj-field input[type="password"] { width: 100%; box-sizing: border-box; /* keep padding+border inside 100% so the form doesn't overflow horizontally */ background: var(--c-bg-deepest); border: 1px solid var(--c-border-strong); border-radius: 8px; padding: .55rem .7rem; color: var(--c-text); font-family: var(--f-mono); font-size: var(--fz-md); } .startup-wizard input[type="text"]:focus, .newproj-field input[type="text"]:focus, .newproj-field input[type="password"]:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(78, 201, 176, .22); } /* ── Buttons (shared, scoped to wizard + folder picker) ─────────────── */ .startup-wizard .btn, .folder-picker .btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; border: 1px solid transparent; border-radius: 8px; padding: .55rem 1rem; font-weight: 600; font-size: var(--fz-md); font-family: var(--f-sans); cursor: pointer; text-decoration: none; white-space: nowrap; transition: filter .12s, background .12s, border-color .12s; } .startup-wizard .btn-primary, .folder-picker .btn-primary { background: var(--c-accent); color: #06140f; } .startup-wizard .btn-primary:hover:not(:disabled) { filter: brightness(1.08); } .startup-wizard .btn-ghost, .folder-picker .btn-ghost { background: transparent; border-color: var(--c-border-strong); color: var(--c-text); } .startup-wizard .btn-ghost:hover:not(:disabled), .folder-picker .btn-ghost:hover:not(:disabled) { background: var(--c-bg-hover); border-color: var(--c-accent); } .startup-wizard .btn:disabled, .folder-picker .btn:disabled { opacity: .45; cursor: not-allowed; } /* ── Recents ────────────────────────────────────────────────────────── */ .startup-wizard__recents { display: flex; flex-direction: column; gap: .35rem; flex: 1 1 auto; min-height: 0; overflow: auto; } .startup-wizard__recent-row { display: flex; align-items: stretch; gap: .35rem; } .startup-wizard__recent { display: flex; align-items: center; gap: .65rem; flex: 1 1 auto; min-width: 0; background: var(--c-bg-deepest); border: 1px solid var(--c-border); border-radius: 8px; padding: .6rem .75rem; color: var(--c-text); cursor: pointer; text-align: left; transition: background .12s, border-color .12s; } .startup-wizard__recent:hover:not(:disabled) { border-color: var(--c-accent); background: var(--c-bg-hover); } .startup-wizard__recent-remove { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 2.25rem; background: var(--c-bg-deepest); border: 1px solid var(--c-border); border-radius: 8px; color: var(--c-text-mute); cursor: pointer; transition: background .12s, border-color .12s, color .12s; } .startup-wizard__recent-remove:hover:not(:disabled) { border-color: var(--c-danger, #e5484d); color: var(--c-danger, #e5484d); background: var(--c-bg-hover); } .startup-wizard__recent-remove:disabled { opacity: .5; cursor: default; } .startup-wizard__recent-text { display: flex; flex-direction: column; min-width: 0; } .startup-wizard__recent-text strong { font-size: var(--fz-md); } .startup-wizard__recent-text small { color: var(--c-text-mute); font-family: var(--f-mono); font-size: var(--fz-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── New project tab ────────────────────────────────────────────────── */ .newproj-gate { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .85rem; text-align: center; padding: 2rem 1rem; color: var(--c-text-dim); } .newproj-gate p { margin: 0; max-width: 42ch; font-size: var(--fz-md); } .newproj-form { flex: 1 1 auto; min-height: 0; /* x:hidden — a lone overflow-y:auto makes overflow-x compute to auto too, which surfaces a spurious horizontal scrollbar on any sub-pixel overflow. y:auto keeps vertical scrolling. */ overflow: hidden auto; display: flex; flex-direction: column; gap: 1.1rem; } .newproj-field { display: flex; flex-direction: column; gap: .4rem; } /* Checkbox row: native-sized box + label on one left-aligned line. Higher specificity than the block `.startup-wizard__card label` rule so display/margin/cursor win. */ .startup-wizard__card .newproj-check { display: flex; align-items: center; gap: .5rem; margin: 0; color: var(--c-text); font-size: var(--fz-md); cursor: pointer; } .startup-wizard__card .newproj-check input[type="checkbox"] { width: auto; height: auto; margin: 0; flex: none; accent-color: var(--c-accent); cursor: pointer; } .newproj-dir-row { display: flex; gap: .5rem; } .newproj-dir-row input { flex: 1; } .newproj-derived { color: var(--c-text-mute); font-size: var(--fz-sm); } .newproj-derived code { color: var(--c-accent); font-family: var(--f-mono); } .newproj-log { max-height: 220px; overflow: auto; background: var(--c-bg-deepest); border: 1px solid var(--c-border); border-radius: 8px; padding: .6rem .75rem; color: var(--c-text-dim); font-family: var(--f-mono); font-size: var(--fz-xs); white-space: pre-wrap; margin: 0; } /* ── GitLab project tab ─────────────────────────────────────────────── */ .gitlab-tab { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: .75rem; } .gitlab-tab__toolbar { display: flex; align-items: center; gap: .6rem; } .gitlab-tab__search { flex: 1; display: flex; align-items: center; gap: .45rem; background: var(--c-bg-deepest); border: 1px solid var(--c-border-strong); border-radius: 8px; padding: 0 .6rem; } .gitlab-tab__search:focus-within { border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(78, 201, 176, .22); } /* Override the shared bordered/padded text-input style — the search wrapper carries the chrome. */ .gitlab-tab__search input[type="text"] { flex: 1; width: auto; background: transparent; border: none; border-radius: 0; padding: .5rem 0; box-shadow: none; font-family: var(--f-sans); } .gitlab-tab__search input[type="text"]:focus { outline: none; border: none; box-shadow: none; } .gitlab-tab__chk { display: inline-flex; align-items: center; gap: .4rem; margin: 0; color: var(--c-text-dim); font-size: var(--fz-sm); white-space: nowrap; cursor: pointer; } .gitlab-tab__chk input { accent-color: var(--c-accent); cursor: pointer; } .gitlab-tab__list { flex: 1 1 auto; min-height: 0; overflow: auto; border: 1px solid var(--c-border-strong); border-radius: 8px; background: var(--c-bg-editor); } .gitlab-tab__row { display: flex; align-items: center; gap: .6rem; width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--c-border); padding: .5rem .7rem; color: var(--c-text); text-align: left; cursor: pointer; transition: background .1s; } .gitlab-tab__row:last-child { border-bottom: none; } .gitlab-tab__row:hover:not(:disabled) { background: var(--c-bg-hover); } .gitlab-tab__row.is-selected { background: var(--c-bg-selected); box-shadow: inset 2px 0 0 var(--c-accent); } .gitlab-tab__row:disabled { opacity: .55; cursor: not-allowed; } .gitlab-tab__row-text { flex: 1; display: flex; flex-direction: column; min-width: 0; } .gitlab-tab__row-text strong { font-size: var(--fz-md); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gitlab-tab__row-text small { color: var(--c-text-mute); font-size: var(--fz-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gitlab-tab__row-date { flex: none; color: var(--c-text-mute); font-family: var(--f-mono); font-size: var(--fz-xs); } .gitlab-tab__foot { display: flex; flex-direction: column; gap: .6rem; } /* ── Server file browser (shared) ───────────────────────────────────── */ .file-browser { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; border: 1px solid var(--c-border-strong); border-radius: 8px; overflow: hidden; background: var(--c-bg-editor); } .file-browser__bar { display: flex; align-items: center; gap: .5rem; padding: .4rem .55rem; background: var(--c-bg-tool); border-bottom: 1px solid var(--c-border); } .file-browser__up { display: inline-flex; align-items: center; background: transparent; border: 1px solid var(--c-border-strong); border-radius: 6px; color: var(--c-text); cursor: pointer; padding: .15rem .3rem; } .file-browser__up:hover:not(:disabled) { border-color: var(--c-accent); background: var(--c-bg-hover); } .file-browser__up:disabled { opacity: .4; cursor: not-allowed; } .file-browser__path { font-family: var(--f-mono); font-size: var(--fz-sm); color: var(--c-text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file-browser__list { flex: 1 1 auto; min-height: 0; overflow: auto; } .file-browser__empty { color: var(--c-text-mute); padding: 1.25rem; text-align: center; font-size: var(--fz-md); } .file-browser__row { display: flex; align-items: center; gap: .55rem; padding: .4rem .65rem; cursor: pointer; border-bottom: 1px solid var(--c-border); transition: background .1s; } .file-browser__row:last-child { border-bottom: none; } .file-browser__row:hover { background: var(--c-bg-hover); } .file-browser__row.is-sln:hover { background: var(--c-bg-selected); } .file-browser__icon { display: inline-flex; } .file-browser__name { flex: 1; font-size: var(--fz-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file-browser__badge { font-size: var(--fz-xs); font-weight: 600; color: var(--c-warn); border: 1px solid rgba(229, 192, 123, .4); border-radius: 4px; padding: .05rem .35rem; } .file-browser__action { border: none; border-radius: 6px; background: var(--c-accent); color: #06140f; font-weight: 600; font-size: var(--fz-sm); padding: .25rem .7rem; cursor: pointer; } .file-browser__action:hover:not(:disabled) { filter: brightness(1.08); } .file-browser__action:disabled { opacity: .45; cursor: not-allowed; } .file-browser__foot { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border-top: 1px solid var(--c-border); background: var(--c-bg-tool); } .file-browser__foot-path { flex: 1; font-family: var(--f-mono); font-size: var(--fz-xs); color: var(--c-text-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The wizard overlay sits at z-index 2000. Radzen dialogs (teleported onto ) default to ~1001, so a dialog opened from the wizard — e.g. the folder picker in "Neues Projekt" — would render BEHIND the overlay. Lift dialogs above it, but only while the wizard is shown (:has), so normal editor dialogs keep their default stacking. */ body:has(.workspace-gate-overlay) > .rz-dialog-wrapper, body:has(.workspace-gate-overlay) > .rz-dialog-mask { z-index: 2100; } /* ── Folder picker dialog ───────────────────────────────────────────── */ /* Radzen's .rz-dialog is a fixed-height flex column, but .rz-dialog-content is block and content-sized — so it doesn't fill the dialog and height:100% inside collapses. Make the content fill (only for the folder picker) so the browser stretches to the dialog height. */ .rz-dialog-content:has(.folder-picker) { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .folder-picker { display: flex; flex-direction: column; gap: .85rem; flex: 1 1 auto; min-height: 0; } .folder-picker__foot { display: flex; justify-content: flex-end; }