/* EDBS_NG Forge — Variante C Workbench IDE shell: dark-first, teal accent, IBM Plex fonts, dense rows. Light theme via [data-theme="light"]. */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); /* ─── Design Tokens (Dark) ─────────────────────────────────────────── */ /* Teleported Radzen popups (dialogs/dropdowns/popups) render on , outside .forge-shell, so the token + bridge set is mirrored onto them via :has() so they inherit the exact same theme as the in-shell content. The DevOpsKbArticlePopover panel is teleported to too (openPopover), so it needs the same token mirror — otherwise its header/background lose var(--c-*) and render transparent. */ .forge-shell, .workspace-gate-overlay, body:has(.forge-shell) > .rz-dialog-wrapper, body:has(.forge-shell) > .rz-dropdown-panel, body:has(.forge-shell) > .rz-popup, body:has(.forge-shell) > .kb-pop-panel { --f-sans: 'IBM Plex Sans', system-ui, sans-serif; --f-mono: 'IBM Plex Mono', ui-monospace, monospace; --fz-xs: 11px; --fz-sm: 12px; --fz-md: 13px; --fz-lg: 14px; --fz-xl: 16px; --row-h: 22px; --tab-h: 30px; --status-h: 24px; --title-h: 44px; --toolbar-h: 34px; --nav-w: 220px; --c-bg-deepest: #0e1116; --c-bg-tool: #161a20; --c-bg-editor: #0e1116; --c-bg-elev: #1c2128; --c-bg-hover: #1a1f26; --c-bg-active: #232a33; --c-bg-selected: #1a3a48; --c-border: #20262e; --c-border-strong: #2e3640; --c-text: #d4dae0; --c-text-dim: #8a96a3; --c-text-mute: #5a6573; --c-accent: #4ec9b0; --c-accent-soft: rgba(78, 201, 176, 0.14); --c-info: #61afef; --c-success: #a3d977; --c-warn: #e5c07b; --c-error: #ef5f6b; /* Radzen bridge */ --rz-base-50: var(--c-bg-editor); --rz-base-100: var(--c-bg-elev); --rz-base-200: var(--c-bg-tool); --rz-base-300: var(--c-bg-active); --rz-base-400: var(--c-border-strong); --rz-base-500: var(--c-text-mute); --rz-base-600: var(--c-text-dim); --rz-base-700: var(--c-text); --rz-base-800: var(--c-text); --rz-base-900: var(--c-text); --rz-base-background-color: var(--c-bg-editor); --rz-border: var(--c-border); --rz-text-color: var(--c-text); --rz-text-secondary-color: var(--c-text-dim); --rz-text-disabled-color: var(--c-text-mute); /* Typography color vars resolve var(--rz-text-color/-title-color) at :root, baking in a dark value; re-declare them so dialog/popup text stays legible. */ --rz-text-body1-color: var(--c-text); --rz-text-body2-color: var(--c-text-dim); --rz-text-caption-color: var(--c-text-dim); --rz-text-overline-color: var(--c-text-dim); --rz-text-h1-color: var(--c-text); --rz-text-h2-color: var(--c-text); --rz-text-h3-color: var(--c-text); --rz-text-h4-color: var(--c-text); --rz-text-h5-color: var(--c-text); --rz-text-h6-color: var(--c-text); --rz-text-subtitle1-color: var(--c-text); --rz-text-subtitle2-color: var(--c-text-dim); --rz-primary: var(--c-accent); --rz-primary-light: var(--c-accent-soft); --rz-primary-dark: #3aad96; --rz-primary-lighter: rgba(78, 201, 176, 0.08); --rz-secondary: var(--c-text-dim); --rz-info: var(--c-info); --rz-info-light: rgba(97, 175, 239, 0.14); --rz-success: var(--c-success); --rz-success-light: rgba(163, 217, 119, 0.14); --rz-warning: var(--c-warn); --rz-warning-light: rgba(229, 192, 123, 0.14); --rz-danger: var(--c-error); --rz-danger-light: rgba(239, 95, 107, 0.14); --rz-text-font-family: var(--f-sans); --rz-body-background-color: var(--c-bg-editor); --rz-input-background-color: var(--c-bg-deepest); --rz-input-hover-background-color: var(--c-bg-deepest); --rz-input-focus-background-color: var(--c-bg-deepest); --rz-input-hover-border: 1px solid var(--c-accent); --rz-input-focus-border: 1px solid var(--c-accent); --rz-input-focus-shadow: 0 0 0 1px var(--c-bg-editor), 0 0 0 3px rgba(78, 201, 176, 0.25); --rz-input-border: var(--c-border-strong); --rz-input-color: var(--c-text); /* The actual value/placeholder text colors. standard-base.css declares these at :root as var(--rz-text-color)/var(--rz-text-tertiary-color), so the indirection is resolved ONCE against :root's light-theme default (#4f4f50) and inherited verbatim — the bridge's later --rz-text-color override never reaches them. Re-declare here (same fix as the --rz-text-* typography vars above) or input text renders near-invisible dark-on-dark in dialogs/popups. */ --rz-input-value-color: var(--c-text); --rz-input-placeholder-color: var(--c-text-mute); --rz-input-disabled-color: var(--c-text-mute); --rz-input-disabled-placeholder-color: var(--c-text-mute); --rz-input-font-size: var(--fz-sm); --rz-input-disabled-background-color: var(--c-bg-elev); --rz-grid-background-color: var(--c-bg-editor); --rz-grid-header-background-color: var(--c-bg-tool); --rz-grid-header-sorted-background-color: var(--c-bg-tool); --rz-grid-header-color: #fff; --rz-grid-cell-color: var(--c-text); --rz-text-title-color: #fff; --rz-grid-hover-background-color: var(--c-bg-hover); --rz-grid-hover-color: var(--c-text); --rz-grid-stripe-background-color: var(--c-bg-elev); --rz-grid-stripe-odd-background-color: var(--c-bg-editor); --rz-grid-selected-background-color: var(--c-accent-soft); --rz-grid-selected-color: var(--c-accent); --rz-grid-cell-focus-background-color: var(--c-accent-soft); --rz-grid-cell-focus-color: var(--c-text); --rz-grid-foot-background-color: var(--c-bg-tool); --rz-grid-toolbar-background-color: var(--c-bg-tool); --rz-grid-filter-background-color: var(--c-bg-tool); --rz-grid-frozen-cell-background-color: var(--c-bg-elev); --rz-on-primary-lighter: var(--c-accent); --rz-dialog-background-color: var(--c-bg-elev); --rz-dialog-title-background-color: var(--c-bg-tool); --rz-dialog-title-color: var(--c-text); --rz-dialog-close-color: var(--c-text-dim); --rz-dialog-close-hover-color: var(--c-text); --rz-checkbox-checked-color: var(--c-accent); --rz-checkbox-checked-background-color: var(--c-bg-deepest); --rz-checkbox-checked-hover-background-color: var(--c-bg-deepest); --rz-checkbox-checked-icon-background-color: var(--c-bg-deepest); --rz-panel-background-color: var(--c-bg-tool); --rz-card-background-color: var(--c-bg-elev); --rz-sidebar-background-color: var(--c-bg-tool); --rz-header-background-color: var(--c-bg-tool); --rz-tabstrip-background-color: var(--c-bg-tool); --rz-dropdown-open-background-color: var(--c-bg-deepest); --rz-dropdown-panel-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); --rz-dropdown-item-hover-background-color: var(--c-bg-hover); --rz-dropdown-item-hover-color: var(--c-text); --rz-dropdown-item-selected-background-color: var(--c-accent-soft); --rz-dropdown-item-selected-color: var(--c-accent); --rz-dropdown-item-selected-hover-background-color: var(--c-accent-soft); --rz-dropdown-item-selected-hover-color: var(--c-accent); /* Radzen 11 SelectBar segments are plain .rz-button elements (no item class to target) — their colors come ONLY from these component vars, and --rz-selectbar-color/-border are declared at :root resolving the light theme (same gotcha as --rz-input-value-color). */ --rz-selectbar-background-color: var(--c-bg-elev); --rz-selectbar-color: var(--c-text-dim); --rz-selectbar-border: 1px solid var(--c-border-strong); --rz-selectbar-selected-background-color: var(--c-accent-soft); --rz-selectbar-selected-color: var(--c-accent); --rz-selectbar-selected-border: 1px solid var(--c-accent); --rz-numeric-button-background-color: var(--c-bg-deepest); --rz-datepicker-panel-background-color: var(--c-bg-elev); --rz-datepicker-header-background-color: var(--c-bg-elev); --rz-tabs-background-color: var(--c-bg-editor); --rz-tabs-tab-hover-background-color: var(--c-bg-hover); --rz-tabs-tab-focus-background-color: var(--c-bg-hover); --rz-accordion-item-background-color: var(--c-bg-editor); --rz-lookup-panel-background-color: var(--c-bg-elev); font-family: var(--f-sans); font-size: var(--fz-md); color: var(--c-text); -webkit-font-smoothing: antialiased; } .forge-shell { background: var(--c-bg-editor); } /* ─── Design Tokens (Light) ────────────────────────────────────────── */ .forge-shell[data-theme="light"], body:has(.forge-shell[data-theme="light"]) > .rz-dialog-wrapper, body:has(.forge-shell[data-theme="light"]) > .rz-dropdown-panel, body:has(.forge-shell[data-theme="light"]) > .rz-popup, body:has(.forge-shell[data-theme="light"]) > .kb-pop-panel { --c-bg-deepest: #fafbfc; --c-bg-tool: #f1f3f5; --c-bg-editor: #ffffff; --c-bg-elev: #f6f8fa; --c-bg-hover: #eef1f4; --c-bg-active: #dde3ea; --c-bg-selected: #c8e6e0; --c-border: #d8dde3; --c-border-strong: #b4bbc4; --c-text: #1a1f2a; --c-text-dim: #4a5460; --c-text-mute: #7a838f; --c-accent: #1a8775; --c-accent-soft: rgba(26, 135, 117, 0.12); --rz-grid-header-color: #1a1f2a; --rz-text-title-color: #1a1f2a; } /* ─── Shell Grid ───────────────────────────────────────────────────── */ .forge-shell { display: grid; grid-template-columns: 1fr; grid-template-rows: var(--title-h) var(--toolbar-h) 1fr var(--status-h); grid-template-areas: "title" "toolbar" "body" "stat"; height: 100vh; width: 100vw; overflow: hidden; user-select: none; } .forge-body { grid-area: body; display: grid; grid-template-columns: var(--nav-w) 1fr; min-height: 0; } .forge-shell.sidebar-collapsed .forge-body { grid-template-columns: 0 1fr; } .forge-shell.sidebar-collapsed .forge-nav { display: none; } .forge-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--c-bg-editor); } .forge-editor { flex: 1; overflow: auto; min-height: 0; transform: none; padding: 0; display: flex; flex-direction: column; } /* ─── Global Toolbar (full-width, under the title banner) ───────────── */ .forge-globalbar { grid-area: toolbar; height: var(--toolbar-h); display: flex; align-items: center; gap: 4px; padding: 0 8px; background: var(--c-bg-tool); border-bottom: 1px solid var(--c-border); } /* ─── Title Bar ────────────────────────────────────────────────────── */ .forge-title { grid-area: title; background: var(--c-bg-tool); border-bottom: 1px solid var(--c-border); display: flex; align-items: center; padding: 0 12px; gap: 14px; color: var(--c-text-dim); } .forge-title-brand { display: flex; align-items: center; gap: 8px; color: var(--c-text); font-weight: 600; font-size: 13px; letter-spacing: -0.005em; white-space: nowrap; } .forge-title-brand-mark { width: 22px; height: 22px; border-radius: 5px; background: var(--c-accent-soft); color: var(--c-accent); display: inline-flex; align-items: center; justify-content: center; } .forge-title-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 4px; background: var(--c-bg-deepest); border: 1px solid var(--c-border); color: var(--c-text-dim); font-family: var(--f-mono); font-size: 11px; cursor: pointer; white-space: nowrap; } .forge-title-pill:hover { border-color: var(--c-border-strong); color: var(--c-text); } .forge-title-pill strong { color: var(--c-text); font-weight: 600; } .forge-title-pill .dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; } .forge-title-pill .dot.ok { background: var(--c-success); } .forge-title-pill .dot.fail { background: var(--c-error); } .forge-title-pill .dot.check { background: var(--c-warn); } .forge-title-pill .dot.none { background: var(--c-text-mute); } .forge-title-pill__project { max-width: 180px; overflow: hidden; text-overflow: ellipsis; } .forge-title-badge { font-size: 9px; font-weight: 700; background: var(--c-accent); color: var(--c-bg-deepest); border-radius: 8px; padding: 1px 5px; margin-left: -4px; line-height: 1; } /* Notification-bell badge: red when any Critical is active, yellow when only Warnings. */ .forge-title-badge.is-critical { background: var(--c-error); color: #fff; } .forge-title-badge.is-warning { background: var(--c-warn); color: var(--c-bg-deepest); } .forge-title-search { flex: 1; max-width: 560px; display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; background: var(--c-bg-deepest); border: 1px solid var(--c-border); border-radius: 5px; color: var(--c-text-mute); font-size: 12px; cursor: text; } .forge-title-search:focus-within { border-color: var(--c-accent); } .forge-title-search input { flex: 1; background: transparent; border: 0; outline: 0; color: var(--c-text); font-family: var(--f-sans); font-size: 13px; } .forge-title-search input::placeholder { color: var(--c-text-mute); } .forge-title-kbd { font-family: var(--f-mono); font-size: 10px; padding: 1px 5px; border: 1px solid var(--c-border); border-radius: 3px; background: var(--c-bg-tool); color: var(--c-text-mute); } .forge-title-actions { margin-left: auto; display: flex; align-items: center; gap: 2px; } .forge-title-btn { width: 28px; height: 28px; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: var(--c-text-dim); cursor: pointer; background: none; border: none; padding: 0; } .forge-title-btn:hover { background: var(--c-bg-hover); color: var(--c-text); } .forge-title-connect { height: 28px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 4px; white-space: nowrap; font-size: 12px; font-weight: 600; color: #f0a020; background: rgba(240, 160, 32, 0.12); border: 1px solid rgba(240, 160, 32, 0.35); cursor: pointer; } .forge-title-connect:hover { background: rgba(240, 160, 32, 0.2); } .forge-title-user { width: 26px; height: 26px; border-radius: 50%; background: var(--c-bg-deepest); border: 1px solid var(--c-border); display: inline-flex; align-items: center; justify-content: center; font-family: var(--f-mono); font-size: 11px; color: var(--c-text); margin-left: 4px; cursor: pointer; } .forge-title-user:hover { border-color: var(--c-accent); } /* ─── User Profile Dropdown ───────────────────────────────────────── */ .forge-user-dropdown { position: absolute; top: 34px; right: 0; z-index: 1000; min-width: 260px; background: var(--c-bg-elev); border: 1px solid var(--c-border); border-radius: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); padding: 8px 0; font-size: var(--fz-sm); color: var(--c-text); } .forge-user-dropdown__header { display: flex; align-items: center; gap: 10px; padding: 8px 14px; } .forge-user-dropdown__avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--c-accent); color: var(--c-bg-deepest); display: inline-flex; align-items: center; justify-content: center; font-family: var(--f-mono); font-size: 12px; font-weight: 600; flex-shrink: 0; } .forge-user-dropdown__info { display: flex; flex-direction: column; min-width: 0; } .forge-user-dropdown__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .forge-user-dropdown__email { color: var(--c-text-muted); font-size: var(--fz-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .forge-user-dropdown__sep { height: 1px; background: var(--c-border); margin: 4px 0; } .forge-user-dropdown__row { display: flex; align-items: center; gap: 8px; padding: 6px 14px; } .forge-user-dropdown__label { color: var(--c-text-muted); white-space: nowrap; } .forge-user-dropdown__value { color: var(--c-text); font-family: var(--f-mono); font-size: var(--fz-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .forge-user-dropdown__action { display: flex; align-items: center; gap: 8px; padding: 6px 14px; color: var(--c-text); text-decoration: none; cursor: pointer; transition: background .1s; } .forge-user-dropdown__action:hover { background: var(--c-bg-hover); color: var(--c-text); } /* ─── Notifications Dropdown ───────────────────────────────────────── */ .forge-note-dropdown { position: absolute; top: 34px; right: 0; z-index: 1000; min-width: 340px; max-width: 420px; background: var(--c-bg-elev); border: 1px solid var(--c-border); border-radius: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); font-size: var(--fz-sm); color: var(--c-text); overflow: hidden; } .forge-note-dropdown__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--c-border); } .forge-note-dropdown__title { font-weight: 600; } .forge-note-dropdown__clear { background: none; border: none; color: var(--c-text-muted); font-size: var(--fz-xs); cursor: pointer; padding: 2px 4px; } .forge-note-dropdown__clear:hover { color: var(--c-text); text-decoration: underline; } .forge-note-dropdown__empty { padding: 18px 14px; color: var(--c-text-muted); text-align: center; } .forge-note-dropdown__list { max-height: 60vh; overflow-y: auto; } .forge-note-item { display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px 8px 10px; border-bottom: 1px solid var(--c-border); border-left: 3px solid transparent; } .forge-note-item:last-child { border-bottom: none; } .forge-note-item.is-critical { border-left-color: var(--c-error); } .forge-note-item.is-warning { border-left-color: var(--c-warn); } .forge-note-item.is-clickable { cursor: pointer; } .forge-note-item.is-clickable:hover { background: var(--c-bg-hover); } .forge-note-item__icon { flex-shrink: 0; margin-top: 1px; } .forge-note-item.is-critical .forge-note-item__icon { color: var(--c-error); } .forge-note-item.is-warning .forge-note-item__icon { color: var(--c-warn); } .forge-note-item__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .forge-note-item__title { font-weight: 600; } .forge-note-item__msg { color: var(--c-text-muted); font-size: var(--fz-xs); white-space: normal; word-break: break-word; } .forge-note-item__time { color: var(--c-text-mute); font-size: var(--fz-xs); } .forge-note-item__dismiss { flex-shrink: 0; background: none; border: none; color: var(--c-text-mute); cursor: pointer; padding: 0; display: flex; align-items: center; } .forge-note-item__dismiss:hover { color: var(--c-text); } /* ─── Compact Nav ──────────────────────────────────────────────────── */ .forge-nav { background: var(--c-bg-tool); border-right: 1px solid var(--c-border); display: flex; flex-direction: column; min-height: 0; overflow: hidden; position: relative; } .forge-nav-filter { padding: 6px 10px 8px; position: relative; border-bottom: 1px solid var(--c-border); } .forge-nav-filter input { width: 100%; height: 26px; background: var(--c-bg-deepest); border: 1px solid var(--c-border); border-radius: 4px; padding: 0 6px 0 26px; color: var(--c-text); font-family: var(--f-sans); font-size: 12px; outline: none; box-sizing: border-box; } .forge-nav-filter input:focus { border-color: var(--c-accent); } .forge-nav-filter input::placeholder { color: var(--c-text-mute); } .forge-nav-filter-icon { position: absolute; top: 12px; left: 18px; color: var(--c-text-mute); font-size: 16px; } .forge-nav-scroll { flex: 1; overflow: auto; padding: 4px 0 6px; } .forge-nav-cat { display: flex; align-items: center; height: 28px; padding: 0 10px 0 8px; gap: 8px; color: var(--c-text); cursor: pointer; font-size: 13px; position: relative; user-select: none; border: none; background: none; width: 100%; text-align: left; } .forge-nav-cat:hover { background: var(--c-bg-hover); } .forge-nav-cat-chev { width: 14px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; transition: transform .12s; font-size: 14px; color: var(--c-text-mute); } .forge-nav-cat.open .forge-nav-cat-chev { transform: rotate(90deg); } .forge-nav-cat-icon { color: var(--c-text-dim); display: inline-flex; flex: 0 0 auto; font-size: 18px; } .forge-nav-cat.active .forge-nav-cat-icon { color: var(--c-accent); } .forge-nav-cat.active { background: var(--c-bg-elev); color: var(--c-text); } .forge-nav-cat.active::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 2px; background: var(--c-accent); border-radius: 0 2px 2px 0; } .forge-nav-cat.singleton { padding-left: 22px; } .forge-nav-cat-label { flex: 1; } .forge-nav-cat-count { font-family: var(--f-mono); font-size: 11px; color: var(--c-text-mute); background: var(--c-bg-deepest); padding: 1px 6px; border-radius: 8px; min-width: 18px; text-align: center; } .forge-nav-cat.active .forge-nav-cat-count { color: var(--c-accent); } .forge-nav-items { padding: 2px 0 6px; } .forge-nav-item { display: flex; align-items: center; height: var(--row-h); padding: 0 10px 0 34px; gap: 6px; font-size: 12px; color: var(--c-text-dim); cursor: pointer; position: relative; text-decoration: none; border: none; background: none; width: 100%; text-align: left; } .forge-nav-item:hover { background: var(--c-bg-hover); color: var(--c-text); } .forge-nav-item.selected { background: var(--c-bg-selected); color: var(--c-text); } .forge-nav-item.selected::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 2px; background: var(--c-accent); } .forge-nav-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--f-mono); font-size: 11px; } .forge-nav-item-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-accent); flex: 0 0 auto; } .forge-nav-drag { position: absolute; top: 0; right: 0; bottom: 0; width: 4px; cursor: col-resize; z-index: 2; } .forge-nav-drag:hover { background: var(--c-accent); } .forge-nav-footer { border-top: 1px solid var(--c-border); padding: 6px 8px; display: flex; align-items: center; gap: 4px; color: var(--c-text-mute); } .forge-nav-footer-btn { width: 22px; height: 22px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; color: var(--c-text-dim); cursor: pointer; background: none; border: none; padding: 0; font-size: 16px; } .forge-nav-footer-btn:hover { background: var(--c-bg-hover); color: var(--c-text); } /* ─── Editor Tabs ──────────────────────────────────────────────────── */ .forge-tabs { height: var(--tab-h); background: var(--c-bg-tool); border-bottom: 1px solid var(--c-border); display: flex; align-items: stretch; overflow-x: auto; overflow-y: hidden; flex: 0 0 auto; } /* Thin horizontal scrollbar so it doesn't eat the 30px strip height. */ .forge-tabs::-webkit-scrollbar { height: 6px; } .forge-tabs::-webkit-scrollbar-thumb { border: none; border-radius: 3px; } .forge-tab { display: flex; align-items: center; padding: 0 8px 0 10px; gap: 6px; border-right: 1px solid var(--c-border); font-size: var(--fz-md); color: var(--c-text-dim); cursor: pointer; position: relative; flex: 0 0 auto; min-width: 120px; max-width: 220px; text-decoration: none; white-space: nowrap; } .forge-tab:hover { background: var(--c-bg-hover); } .forge-tab.active { background: var(--c-bg-editor); color: var(--c-text); border-bottom: 2px solid var(--c-accent); } .forge-tab-icon { flex: 0 0 auto; display: inline-flex; color: var(--c-text-mute); font-size: 16px; } .forge-tab.active .forge-tab-icon { color: var(--c-accent); } .forge-tab-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; } .forge-tab-dirty { width: 7px; height: 7px; border-radius: 50%; background: var(--c-accent); flex: 0 0 auto; } .forge-tab-close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 3px; border: none; background: transparent; color: var(--c-text-mute); cursor: pointer; opacity: 0; transition: opacity 0.12s; padding: 0; margin-left: 2px; } .forge-tab:hover .forge-tab-close { opacity: 0.7; } .forge-tab-close:hover { background: var(--c-bg-active); color: var(--c-text); opacity: 1; } /* ─── Page toolbar (IDE-style, replaces RadzenStack toolbars) ───── */ .forge-toolbar { height: 34px; display: flex; align-items: center; padding: 0 8px; gap: 4px; border-bottom: 1px solid var(--c-border); background: var(--c-bg-tool); flex: 0 0 auto; } .forge-toolbar-sep { width: 1px; height: 18px; background: var(--c-border-strong); margin: 0 4px; flex: 0 0 auto; } .forge-toolbar-spacer { flex: 1; } .forge-toolbar-meta { font-family: var(--f-mono); font-size: var(--fz-xs); color: var(--c-text-mute); } .forge-toolbar .rz-dropdown { font-size: var(--fz-xs); --rz-input-padding: 0 0.4rem; border-radius: 3px; } .forge-toolbar .rz-dropdown .rz-inputtext { font-size: var(--fz-xs); padding: 0 0.4rem; min-height: 22px; line-height: 22px; } .forge-toolbar .rz-dropdown .rz-helper { padding: 0 0.2rem; min-height: 22px; } .forge-tbtn { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 3px; border: none; background: transparent; color: var(--c-text-dim); font-family: var(--f-sans); font-size: var(--fz-sm); cursor: pointer; white-space: nowrap; } .forge-tbtn:hover { background: var(--c-bg-hover); color: var(--c-text); } .forge-tbtn:disabled { opacity: 0.35; cursor: not-allowed; } .forge-tbtn:disabled:hover { background: transparent; color: var(--c-text-dim); } .forge-tbtn .rzi { font-size: 15px; } .forge-tbtn.primary { background: var(--c-accent); color: var(--c-bg-deepest); font-weight: 600; } .forge-tbtn.primary:hover { filter: brightness(1.1); } .forge-tbtn.primary:disabled { filter: none; } .forge-tbtn.danger { color: var(--c-error); } .forge-tbtn.danger:hover { background: rgba(239, 95, 107, 0.12); } /* Designer canvas-card name header: a title-styled input that reveals its editability on hover/focus (accent border). Replaces the old inline `border:none` look that made the name field read like a static heading. The Aggregate/Namespace fields below are read-only. */ .forge-canvas-header .rz-textbox { background: transparent; border: 1px solid transparent; border-radius: 4px; transition: border-color .12s, background-color .12s; } .forge-canvas-header .rz-textbox:hover { border-color: var(--c-border-strong); background: var(--c-bg-deepest); } .forge-canvas-header .rz-textbox:focus { border-color: var(--c-accent); background: var(--c-bg-deepest); box-shadow: var(--rz-input-focus-shadow); outline: none; } .forge-toolbar-dirty { font-size: var(--fz-xs); color: var(--c-accent); font-style: italic; display: flex; align-items: center; gap: 4px; } .forge-toolbar-dirty::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-accent); } /* ─── Sub-tabs (within page content) ────────────────────────────── */ .forge-subtabs { display: flex; border-bottom: 1px solid var(--c-border); background: var(--c-bg-tool); padding: 0 6px; height: 28px; flex: 0 0 auto; } .forge-subtab { padding: 0 10px; font-size: var(--fz-sm); color: var(--c-text-dim); display: flex; align-items: center; gap: 5px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; border-top: none; border-left: none; border-right: none; background: none; font-family: var(--f-sans); white-space: nowrap; } .forge-subtab:hover { color: var(--c-text); } .forge-subtab.active { color: var(--c-text); border-bottom-color: var(--c-accent); } .forge-subtab .forge-subtab-icon { font-size: 14px; } /* ─── Module color accents ──────────────────────────────────────── */ .forge-shell { --mod-home: var(--c-accent); --mod-entity: #61afef; --mod-formdto: #c678dd; --mod-sql: #e5c07b; --mod-task: #e8a0bf; --mod-widget: #6fd3c7; --mod-layout: #a3d977; --mod-navigation:#928cee; --mod-templates: #56b6c2; --mod-erd: #d19a66; --mod-report: #e06c75; --mod-importer: #4db6ac; } /* Tabs: left border stripe + tinted icon */ .forge-tab.mod-home { border-left: 2px solid var(--mod-home); } .forge-tab.mod-entity { border-left: 2px solid var(--mod-entity); } .forge-tab.mod-formdto { border-left: 2px solid var(--mod-formdto); } .forge-tab.mod-sql { border-left: 2px solid var(--mod-sql); } .forge-tab.mod-task { border-left: 2px solid var(--mod-task); } .forge-tab.mod-widget { border-left: 2px solid var(--mod-widget); } .forge-tab.mod-layout { border-left: 2px solid var(--mod-layout); } .forge-tab.mod-navigation{ border-left: 2px solid var(--mod-navigation); } .forge-tab.mod-templates { border-left: 2px solid var(--mod-templates); } .forge-tab.mod-erd { border-left: 2px solid var(--mod-erd); } .forge-tab.mod-report { border-left: 2px solid var(--mod-report); } .forge-tab.mod-importer { border-left: 2px solid var(--mod-importer); } .forge-tab.mod-home .forge-tab-icon { color: var(--mod-home); } .forge-tab.mod-entity .forge-tab-icon { color: var(--mod-entity); } .forge-tab.mod-formdto .forge-tab-icon { color: var(--mod-formdto); } .forge-tab.mod-sql .forge-tab-icon { color: var(--mod-sql); } .forge-tab.mod-task .forge-tab-icon { color: var(--mod-task); } .forge-tab.mod-widget .forge-tab-icon { color: var(--mod-widget); } .forge-tab.mod-layout .forge-tab-icon { color: var(--mod-layout); } .forge-tab.mod-navigation .forge-tab-icon { color: var(--mod-navigation); } .forge-tab.mod-templates .forge-tab-icon { color: var(--mod-templates); } .forge-tab.mod-erd .forge-tab-icon { color: var(--mod-erd); } .forge-tab.mod-report .forge-tab-icon { color: var(--mod-report); } .forge-tab.mod-importer .forge-tab-icon { color: var(--mod-importer); } /* Nav categories: icon always tinted by module type, so it can be matched against the open tabs at a glance (active state stays the same color). */ .forge-nav-cat[data-kind="home"] .forge-nav-cat-icon { color: var(--mod-home); } .forge-nav-cat[data-kind="entities"] .forge-nav-cat-icon { color: var(--mod-entity); } .forge-nav-cat[data-kind="formdtos"] .forge-nav-cat-icon { color: var(--mod-formdto); } .forge-nav-cat[data-kind="sql"] .forge-nav-cat-icon { color: var(--mod-sql); } .forge-nav-cat[data-kind="tasks"] .forge-nav-cat-icon { color: var(--mod-task); } .forge-nav-cat[data-kind="widgets"] .forge-nav-cat-icon { color: var(--mod-widget); } .forge-nav-cat[data-kind="layouts"] .forge-nav-cat-icon { color: var(--mod-layout); } .forge-nav-cat[data-kind="navigation"] .forge-nav-cat-icon { color: var(--mod-navigation); } .forge-nav-cat[data-kind="templates"] .forge-nav-cat-icon { color: var(--mod-templates); } .forge-nav-cat[data-kind="erd"] .forge-nav-cat-icon { color: var(--mod-erd); } .forge-nav-cat[data-kind="reports"] .forge-nav-cat-icon { color: var(--mod-report); } .forge-nav-cat[data-kind="importers"] .forge-nav-cat-icon { color: var(--mod-importer); } /* Nav category left accent bar: colored per module */ .forge-nav-cat[data-kind="home"].active::before { background: var(--mod-home); } .forge-nav-cat[data-kind="entities"].active::before { background: var(--mod-entity); } .forge-nav-cat[data-kind="formdtos"].active::before { background: var(--mod-formdto); } .forge-nav-cat[data-kind="sql"].active::before { background: var(--mod-sql); } .forge-nav-cat[data-kind="tasks"].active::before { background: var(--mod-task); } .forge-nav-cat[data-kind="widgets"].active::before { background: var(--mod-widget); } .forge-nav-cat[data-kind="layouts"].active::before { background: var(--mod-layout); } .forge-nav-cat[data-kind="navigation"].active::before { background: var(--mod-navigation); } .forge-nav-cat[data-kind="templates"].active::before { background: var(--mod-templates); } .forge-nav-cat[data-kind="erd"].active::before { background: var(--mod-erd); } .forge-nav-cat[data-kind="reports"].active::before { background: var(--mod-report); } .forge-nav-cat[data-kind="importers"].active::before { background: var(--mod-importer); } /* Tab context menu */ .forge-ctx-backdrop { position: fixed; inset: 0; z-index: 999; } .forge-ctx-menu { position: fixed; z-index: 1000; background: var(--c-bg-elev); border: 1px solid var(--c-border-strong); border-radius: 4px; padding: 4px 0; min-width: 180px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); } .forge-ctx-item { display: flex; align-items: center; gap: 8px; width: 100%; height: 28px; padding: 0 12px; border: none; background: transparent; color: var(--c-text); font-family: var(--f-sans); font-size: var(--fz-sm); cursor: pointer; text-align: left; } .forge-ctx-item:hover { background: var(--c-bg-selected); } .forge-ctx-item:disabled { color: var(--c-text-mute); cursor: default; } .forge-ctx-item:disabled:hover { background: transparent; } .forge-ctx-item .rzi { color: var(--c-text-dim); font-size: 14px; } .forge-ctx-sep { height: 1px; margin: 4px 0; background: var(--c-border); } /* Filter input at the top of a .forge-ctx-menu (e.g. the Aggregate ▾-picker) — shown when the list gets long so it stays scannable. */ .forge-ctx-search { display: block; width: calc(100% - 8px); margin: 0 4px 4px; padding: 4px 8px; border: 1px solid var(--c-border); border-radius: 3px; background: var(--c-bg-elev); color: var(--c-text); font-family: var(--f-sans); font-size: var(--fz-sm); box-sizing: border-box; } .forge-ctx-search::placeholder { color: var(--c-text-mute); } .forge-ctx-search:focus { outline: none; border-color: var(--c-accent); } /* ── Title-bar search launcher (the inert input became a button) ─────────────── */ button.forge-title-search { cursor: pointer; text-align: left; font-family: var(--f-sans); appearance: none; } .forge-title-search__placeholder { flex: 1; color: var(--c-text-mute); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Global spotlight search overlay ─────────────────────────────────────────── */ .forge-spotlight-backdrop { position: fixed; inset: 0; z-index: 1099; background: rgba(0, 0, 0, 0.38); backdrop-filter: blur(2px); } .forge-spotlight { position: fixed; top: 12vh; left: 50%; transform: translateX(-50%); width: min(640px, calc(100vw - 32px)); max-height: 70vh; z-index: 1100; display: flex; flex-direction: column; background: var(--c-bg-elev); border: 1px solid var(--c-border-strong); border-radius: 10px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45); overflow: hidden; } .forge-spotlight-input { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px; border-bottom: 1px solid var(--c-border); color: var(--c-text-mute); flex: 0 0 auto; } .forge-spotlight-input input { flex: 1; background: transparent; border: 0; outline: 0; color: var(--c-text); font-family: var(--f-sans); font-size: 15px; } .forge-spotlight-input input::placeholder { color: var(--c-text-mute); } .forge-spotlight-spin { width: 14px; height: 14px; border: 2px solid var(--c-border-strong); border-top-color: var(--c-accent); border-radius: 50%; animation: forge-spotlight-spin 0.7s linear infinite; flex: 0 0 auto; } @keyframes forge-spotlight-spin { to { transform: rotate(360deg); } } .forge-spotlight-results { overflow-y: auto; padding: 8px; } .forge-spotlight-empty { padding: 28px 12px; text-align: center; color: var(--c-text-mute); font-size: 13px; } .forge-spotlight-group { margin-bottom: 6px; } .forge-spotlight-group-head { display: flex; align-items: center; gap: 6px; padding: 8px 8px 4px; color: var(--c-text-mute); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; } .forge-spotlight-more { margin-left: auto; text-transform: none; letter-spacing: 0; padding: 1px 7px; border-radius: 8px; background: var(--c-accent-soft); color: var(--c-accent); font-size: 10px; } .forge-spotlight-card { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--c-text); text-align: left; cursor: pointer; font-family: var(--f-sans); } .forge-spotlight-card:hover, .forge-spotlight-card.is-active { background: var(--c-bg-hover); box-shadow: inset 2px 0 0 var(--c-accent); } .forge-spotlight-card-icon { color: var(--c-accent); flex: 0 0 auto; } .forge-spotlight-card-body { display: flex; flex-direction: column; min-width: 0; flex: 1; } .forge-spotlight-card-title { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .forge-spotlight-card-sub { font-family: var(--f-mono); font-size: 11px; color: var(--c-text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .forge-spotlight-badges { display: flex; align-items: center; gap: 4px; margin-left: auto; flex: 0 0 auto; } .forge-spotlight-badge { font-size: 10px; padding: 1px 6px; border-radius: 8px; border: 1px solid var(--c-border); color: var(--c-text-mute); white-space: nowrap; } .forge-spotlight-badge.tone-accent { background: var(--c-accent-soft); color: var(--c-accent); border-color: transparent; } .forge-spotlight-badge.tone-warn { background: rgba(240, 160, 32, 0.16); color: #f0a020; border-color: transparent; } /* Global "Generieren" dropdown — anchored under its trigger (overrides .forge-ctx-menu's fixed pos). */ .forge-gen-menu { position: relative; display: inline-flex; } .forge-gen-menu__panel { position: absolute; top: calc(100% + 4px); left: 0; } /* Nav-footer "Neu" dropdown — anchored ABOVE its trigger (the footer sits at the very bottom). */ .forge-nav-new { position: relative; display: inline-flex; } .forge-nav-new__panel { position: absolute; bottom: calc(100% + 4px); left: 0; } /* Profile dropdown sits in the right-aligned run-controls cluster — anchor it to the trigger's right edge so the panel opens leftward and never overflows the viewport. */ .forge-profile-menu__panel { left: auto; right: 0; } /* Aggregate ▾-picker (Entity-Designer): its trigger sits near the right edge of the `overflow:auto` left splitter pane, so a rightward panel spills past the pane and lands behind the code-preview pane. Open it leftward (anchor the right edge to the trigger) so the whole menu — and its text — stays inside the left pane. */ .forge-agg-picker__panel { left: auto; right: 0; } .forge-tabs-spacer { flex: 1; } /* JetBrains-style overflow dropdown: pinned to the right edge of the (scrolling) strip so it stays reachable, with a left shadow hinting at hidden tabs behind it. */ .forge-tabs-overflow { position: sticky; right: 0; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 30px; border: none; border-left: 1px solid var(--c-border); background: var(--c-bg-tool); color: var(--c-text-dim); cursor: pointer; box-shadow: -8px 0 8px -4px rgba(0, 0, 0, 0.45); } .forge-tabs-overflow:hover { background: var(--c-bg-hover); color: var(--c-text); } .forge-tabs-overflow-menu { max-height: 60vh; overflow-y: auto; max-width: 360px; } .forge-tabs-overflow-menu .forge-ctx-item.active { color: var(--c-accent); } .forge-tabs-overflow-menu .forge-ctx-item.active .rzi { color: var(--c-accent); } .forge-tabs-overflow-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; } /* ─── Bottom Panel ─────────────────────────────────────────────────── */ .forge-bottom { border-top: 1px solid var(--c-border); background: var(--c-bg-tool); display: flex; flex-direction: column; flex: 0 0 auto; min-height: 0; } .forge-bottom:not(.expanded) .forge-bottom-body { display: none; } .forge-bottom:not(.expanded) .forge-bottom-drag { display: none; } .forge-bottom-drag { height: 4px; cursor: row-resize; background: transparent; flex: 0 0 auto; position: relative; } .forge-bottom-drag::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--c-border); transition: background .15s; } .forge-bottom-drag:hover::after { height: 2px; background: var(--c-accent); } .forge-bottom-head { height: 28px; border-bottom: 1px solid var(--c-border); display: flex; align-items: stretch; flex: 0 0 auto; } .forge-bottom-tab { padding: 0 12px; display: flex; align-items: center; gap: 6px; font-size: var(--fz-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-text-dim); font-weight: 600; cursor: pointer; position: relative; border: none; background: none; } .forge-bottom-tab.active { color: var(--c-text); } .forge-bottom-tab.active::after { content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 1px; background: var(--c-accent); } .forge-bottom-tab-count { background: var(--c-bg-active); color: var(--c-text); font-family: var(--f-mono); font-size: 10px; padding: 1px 5px; border-radius: 8px; } .forge-bottom-actions { margin-left: auto; display: flex; align-items: center; padding: 0 4px; } .forge-bottom-body { flex: 1; overflow: auto; min-height: 0; } /* ─── Status Bar ───────────────────────────────────────────────────── */ .forge-status { grid-area: stat; background: var(--c-bg-tool); border-top: 1px solid var(--c-border); display: flex; align-items: center; padding: 0 8px; gap: 12px; font-size: var(--fz-xs); color: var(--c-text-dim); font-family: var(--f-mono); } .forge-status-item { display: flex; align-items: center; gap: 4px; } .forge-status-item.accent { color: var(--c-accent); } .forge-status-item.ok { color: var(--c-success); } .forge-status-item--clickable { cursor: pointer; padding: 0 4px; margin: 0 -4px; border-radius: 3px; transition: background 80ms ease, color 80ms ease; } .forge-status-item--clickable:hover { background: var(--c-bg-hover); color: var(--c-text); } .forge-status-spacer { flex: 1; } .forge-status-dot { width: 8px; height: 8px; border-radius: 50%; } .forge-status-dot.ok { background: var(--c-success); } .forge-status-dot.fail { background: var(--c-error); } .forge-status-dot.check { background: var(--c-warn); } .forge-status-dot.none { background: var(--c-text-mute); } /* ─── Radzen overrides for dark theme ──────────────────────────────── */ .forge-shell .rz-card { background: var(--c-bg-elev); padding: 0; } .forge-shell .rz-datatable thead th { background: var(--c-bg-tool); color: var(--c-text); } .forge-shell .rz-datatable-data td { border-bottom-color: var(--c-border); } .forge-shell .rz-dropdown { background: var(--c-bg-deepest); border-color: var(--c-border-strong); color: var(--c-text); } .forge-shell .rz-textbox { background: var(--c-bg-deepest); border-color: var(--c-border-strong); color: var(--c-text); } .forge-shell .rz-button.rz-variant-text { color: var(--c-text-dim); } .forge-shell .rz-button.rz-variant-text:hover { background: var(--c-bg-hover); color: var(--c-text); } .forge-shell .rz-dialog-content { background: var(--c-bg-elev); color: var(--c-text); } .forge-shell .rz-dialog-titlebar { background: var(--c-bg-tool); border-bottom: 1px solid var(--c-border); color: var(--c-text); } .forge-shell .rz-splitbar { background: var(--c-border); } .forge-shell .rz-splitbar:hover { background: var(--c-accent); } /* Radzen tabs (.rz-tabview) → Workbench style */ .forge-shell .rz-tabview .rz-tabview-nav { background: var(--c-bg-tool); border-bottom: 1px solid var(--c-border); margin: 0; padding: 0 4px; list-style: none; display: flex; gap: 0; } .forge-shell .rz-tabview .rz-tabview-nav li { background: transparent !important; border: none !important; border-bottom: 2px solid transparent !important; border-radius: 0; margin: 0; margin-bottom: -1px; padding: 0; transition: none; } .forge-shell .rz-tabview .rz-tabview-nav li:hover { background: var(--c-bg-hover) !important; } .forge-shell .rz-tabview .rz-tabview-nav li.rz-tabview-selected { border-bottom-color: var(--c-accent) !important; background: transparent !important; } .forge-shell .rz-tabview .rz-tabview-nav li button { background: transparent; border: none; color: var(--c-text-dim); font-size: var(--fz-sm); font-family: var(--f-sans); padding: 0 10px; height: 28px; cursor: pointer; } .forge-shell .rz-tabview .rz-tabview-nav li:hover button { color: var(--c-text); } .forge-shell .rz-tabview .rz-tabview-nav li.rz-tabview-selected button { color: var(--c-text); font-weight: 500; } .forge-shell .rz-tabview .rz-tabview-panels { background: var(--c-bg-editor); border: none; padding: 0; } .forge-shell .rz-tabview .rz-tabview-panel { padding: 0; } /* Task canvas: let the tabbed card fill its pane so the Tasks tab's 2-pane splitter (properties | Monaco) uses the full available height instead of collapsing to content. */ .forge-task-canvas { height: 100%; } .forge-task-canvas .rz-tabview { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .forge-task-canvas .rz-tabview .rz-tabview-panels { flex: 1 1 auto; min-height: 0; } .forge-task-canvas .rz-tabview .rz-tabview-panel { height: 100%; } /* Task body editor: a dark "code frame" that shows the enclosing ExecuteAsync signature (read-only) above the Monaco body editor — which only edits the method body. Token colors mirror Monaco's vs-dark palette so the signature reads as the editor's own first lines. The frame border replaces the editor wrapper's border. */ .forge-task-body { flex: 1; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--rz-border); border-radius: 4px; overflow: hidden; background: #1e1e1e; } .forge-task-body__sig, .forge-task-body__close { font-family: Consolas, Menlo, 'Courier New', monospace; font-size: 13px; line-height: 1.5; color: #d4d4d4; padding-left: 26px; /* roughly aligns with Monaco's line content (past the gutter) */ white-space: pre; user-select: none; flex-shrink: 0; } .forge-task-body__sig { padding-top: 8px; } .forge-task-body__close { padding-bottom: 8px; } .forge-task-body__editor { flex: 1; min-height: 0; } .forge-task-body .tok-kw { color: #569cd6; } .forge-task-body .tok-type { color: #4ec9b0; } .forge-task-body .tok-method { color: #dcdcaa; } .forge-task-body .tok-param { color: #9cdcfe; } .forge-shell .rz-panel-titlebar { background: var(--c-bg-elev); border-bottom: 1px solid var(--c-border); color: var(--c-text); } .forge-shell .rz-badge { background: var(--c-accent-soft); color: var(--c-accent); } .forge-shell .rz-alert { background: var(--c-bg-elev); border-color: var(--c-border); color: var(--c-text); } .forge-shell .rz-chkbox-box { background: var(--c-bg-deepest); border-color: var(--c-border-strong); } .forge-shell .rz-state-active .rz-chkbox-box { background: var(--c-accent); border-color: var(--c-accent); } .forge-shell .rz-numeric { background: var(--c-bg-deepest); } /* SelectBar theming lives in the token bridge (--rz-selectbar-*) — Radzen 11 renders the segments as bare .rz-button, so there is no selectbar-specific class to target. Only the hover text color needs a rule: Radzen hardwires it to --rz-on-base-lighter (light-theme near-black, shared with too many surfaces to re-bridge globally). */ .forge-shell .rz-selectbar .rz-button:not(.rz-state-active):hover, body:has(.forge-shell) > .rz-dialog-wrapper .rz-selectbar .rz-button:not(.rz-state-active):hover, body:has(.forge-shell) > .rz-popup .rz-selectbar .rz-button:not(.rz-state-active):hover { color: var(--c-text); } .forge-shell .rz-tooltip-content { background: var(--c-bg-elev); color: var(--c-text); border: 1px solid var(--c-border); } .forge-shell .rz-navigation-item-link { color: var(--c-text-dim); } .forge-shell .rz-navigation-item-link:hover, .forge-shell .rz-navigation-item-link.active { color: var(--c-text); background: var(--c-bg-hover); } /* body background */ .forge-shell ~ #blazor-error-ui, body { background: var(--c-bg-editor); } /* ─── Radzen teleported popups (rendered outside .forge-shell on ) ── The token + bridge set above is mirrored onto these wrappers per theme, so Radzen's own component CSS already themes the inner content (inputs, buttons, checkboxes, dropdown items, dialog title/content) correctly. These rules only refine the structural chrome: modal backdrop + frames. */ body:has(.forge-shell) > .rz-dialog-wrapper { background: rgba(0, 0, 0, 0.55); } body:has(.forge-shell) > .rz-dialog-wrapper .rz-dialog { border: 1px solid var(--c-border-strong); border-radius: 6px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45); overflow: hidden; } body:has(.forge-shell) > .rz-dialog-wrapper .rz-dialog-titlebar { border-bottom: 1px solid var(--c-border); } body:has(.forge-shell) > .rz-dropdown-panel, body:has(.forge-shell) > .rz-popup { border: 1px solid var(--c-border-strong); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); } /* Checkboxes inside teleported popups — dark box + teal checkmark/border. (rz-state-active sits on the box element itself, not an ancestor.) */ body:has(.forge-shell) > .rz-dialog-wrapper .rz-chkbox-box, body:has(.forge-shell) > .rz-popup .rz-chkbox-box { background: var(--c-bg-deepest); border-color: var(--c-border-strong); } body:has(.forge-shell) > .rz-dialog-wrapper .rz-chkbox-box.rz-state-active, body:has(.forge-shell) > .rz-popup .rz-chkbox-box.rz-state-active { border-color: var(--c-accent); } /* ─── Scrollbars ───────────────────────────────────────────────────── */ .forge-shell ::-webkit-scrollbar { width: 10px; height: 10px; } .forge-shell ::-webkit-scrollbar-track { background: transparent; } .forge-shell ::-webkit-scrollbar-thumb { background: var(--c-border-strong); border-radius: 5px; border: 2px solid var(--c-bg-tool); } .forge-shell ::-webkit-scrollbar-thumb:hover { background: var(--c-text-mute); } /* ─── DevOpsKB embed test: single article iframe (read/edit) ──────────── One iframe serves both modes (?mode=read|edit), ADR 0028. Fills the remaining page height (parent .forge-editor is a flex column). */ .kb-pane { flex: 1 1 auto; min-height: 0; display: flex; } .kb-frame { flex: 1 1 auto; width: 100%; height: 100%; min-height: 0; border: 0; background: #fff; } /* ─── DevOpsKbArticlePopover: draggable/resizable article window ──────── Trigger (text/icon) + fixed-position NON-MODAL floating window: anchored in JS (openPopover) on open, then draggable by .kb-pop-header and resizable by the .kb-pop-resize corner grip. Closes only via the X button or Escape — no click-outside/backdrop close. */ .kb-pop { display: inline-flex; } /* HelpHint: generic inline "?" help anchor (optional label + DevOpsKbArticlePopover). Used in grid column headers and inline in body text — see Components/Shared/HelpHint.razor. */ .help-hint { display: inline-flex; align-items: center; gap: 2px; } .help-hint__trigger { display: inline-flex; align-items: center; padding: 0; margin-left: 2px; border: 0; background: none; color: var(--rz-text-tertiary-color, #999); cursor: pointer; opacity: 0.6; font-size: 0.9em; } .help-hint__trigger:hover { color: var(--c-accent); opacity: 1; } .kb-pop-trigger { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; } .kb-pop-trigger:hover { color: var(--c-accent); } /* TOC toggle in the popover header: accent while the table of contents is shown. */ .kb-pop-toc-on { color: var(--c-accent); } .kb-pop-panel { position: fixed; /* Above the startup-wizard overlay (2000) and its teleported Radzen dialogs (2100, see wizard.css): the help popover is a user-invoked floating window teleported to (openPopover), so it must sit above whatever surface launched it — including the wizard darkening. Native confirm() dialogs are browser-level and still appear above it. */ z-index: 2200; width: min(880px, calc(100vw - 16px)); height: min(680px, calc(100vh - 16px)); min-width: 360px; min-height: 240px; display: flex; flex-direction: column; background: var(--c-bg-elev); border: 1px solid var(--c-border-strong); border-radius: 6px; box-shadow: 0 16px 48px rgba(0, 0, 0, .45); overflow: hidden; } .kb-pop-header { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; height: 34px; padding: 0 6px; background: var(--c-bg-tool); border-bottom: 1px solid var(--c-border); cursor: move; user-select: none; } .kb-pop-header button { cursor: pointer; } /* buttons keep the click cursor, not move */ .kb-pop-title { font-size: 12px; font-weight: 600; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kb-pop-spacer { flex: 1; } .kb-pop-dirty { color: var(--c-warn, #d08b00); font-size: 12px; } .kb-pop-close { padding: 0 6px; } .kb-pop-frame { flex: 1 1 auto; width: 100%; border: 0; background: #fff; } .kb-pop-msg { flex: 1; display: flex; align-items: center; justify-content: center; padding: 16px; color: var(--c-text-dim); font-size: 12px; } /* Bottom-right resize grip; sits above the iframe at the panel corner. */ .kb-pop-resize { position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; z-index: 2; cursor: nwse-resize; touch-action: none; background: linear-gradient(135deg, transparent 0 45%, var(--c-border-strong) 45% 55%, transparent 55% 70%, var(--c-border-strong) 70% 80%, transparent 80%); } /* ─── Home dashboard ────────────────────────────────────────────── */ .forge-dash { flex: 1; min-height: 0; overflow: auto; padding: 18px 20px 28px; } .forge-dash-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .forge-dash-head-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: var(--c-accent-soft); color: var(--c-accent); } .forge-dash-head-icon .rzi { font-size: 22px; } .forge-dash-title { font-size: var(--fz-xl); font-weight: 600; color: var(--c-text); } .forge-dash-sub { font-size: var(--fz-sm); color: var(--c-text-dim); } .forge-dash-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: start; } @media (max-width: 1100px) { .forge-dash-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 680px) { .forge-dash-grid { grid-template-columns: 1fr; } .forge-dash-grid .forge-card { grid-column: span 1 !important; } } /* Card shell (reusable beyond the dashboard) */ .forge-card { display: flex; flex-direction: column; background: var(--c-bg-elev); border: 1px solid var(--c-border); border-radius: 8px; overflow: hidden; } .forge-card-head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--c-border); font-size: var(--fz-sm); font-weight: 600; color: var(--c-text-dim); text-transform: uppercase; letter-spacing: 0.04em; } .forge-card-head .rzi { font-size: 16px; color: var(--c-text-mute); } .forge-card-body { padding: 12px; } /* Project-info definition list */ .forge-dash-deflist { display: grid; gap: 9px; margin: 0; } .forge-dash-deflist > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .forge-dash-deflist dt { font-size: var(--fz-sm); color: var(--c-text-mute); margin: 0; } .forge-dash-deflist dd { margin: 0; font-size: var(--fz-md); color: var(--c-text); font-family: var(--f-mono); text-align: right; word-break: break-word; } /* Asset stat tiles */ .forge-dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } @media (max-width: 520px) { .forge-dash-stats { grid-template-columns: repeat(2, 1fr); } } .forge-dash-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border: 1px solid var(--c-border); border-radius: 7px; background: var(--c-bg-deepest); cursor: pointer; transition: border-color .12s, background .12s; } .forge-dash-stat:hover { border-color: var(--c-border-strong); background: var(--c-bg-hover); } .forge-dash-stat-num { font-size: 22px; font-weight: 600; line-height: 1.1; color: var(--c-text); } .forge-dash-stat-label { font-size: var(--fz-xs); color: var(--c-text-dim); } .forge-dash-stat[data-kind="entities"] .forge-dash-stat-num { color: var(--mod-entity); } .forge-dash-stat[data-kind="formdtos"] .forge-dash-stat-num { color: var(--mod-formdto); } .forge-dash-stat[data-kind="sql"] .forge-dash-stat-num { color: var(--mod-sql); } .forge-dash-stat[data-kind="tasks"] .forge-dash-stat-num { color: var(--mod-task); } .forge-dash-stat[data-kind="widgets"] .forge-dash-stat-num { color: var(--mod-widget); } .forge-dash-stat[data-kind="layouts"] .forge-dash-stat-num { color: var(--mod-layout); } .forge-dash-stat[data-kind="reports"] .forge-dash-stat-num { color: var(--mod-report); } .forge-dash-stat[data-kind="importers"] .forge-dash-stat-num { color: var(--mod-importer); } /* Status rows, badges, dots */ .forge-dash-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .forge-dash-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 11px; font-size: var(--fz-xs); background: var(--c-bg-deepest); border: 1px solid var(--c-border); color: var(--c-text); } .forge-dash-badge.ok { color: var(--c-success); border-color: color-mix(in srgb, var(--c-success) 40%, transparent); } .forge-dash-badge.warn { color: var(--c-warn); border-color: color-mix(in srgb, var(--c-warn) 40%, transparent); } .forge-dash-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c-text-mute); flex: none; } .forge-dash-dot.ok { background: var(--c-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-success) 22%, transparent); } .forge-dash-dot.err { background: var(--c-error); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-error) 22%, transparent); } .forge-dash-dot.info { background: var(--c-info); } .forge-dash-dot.mute { background: var(--c-text-mute); } .forge-dash-commits { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 5px; } .forge-dash-commits li { display: flex; gap: 8px; font-size: var(--fz-sm); color: var(--c-text-dim); overflow: hidden; } .forge-dash-commits code { color: var(--c-accent); font-family: var(--f-mono); flex: none; } .forge-dash-commits span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .forge-dash-link { display: inline-block; margin-top: 8px; font-size: var(--fz-sm); color: var(--c-info); font-family: var(--f-mono); word-break: break-all; } .forge-dash-muted { margin: 8px 0 0; font-size: var(--fz-sm); color: var(--c-text-mute); } .forge-dash-err { color: var(--c-error); } /* Empty state (no project bound) */ .forge-dash-empty { flex-direction: row; align-items: center; gap: 12px; padding: 18px; max-width: 560px; } .forge-dash-empty .rzi { font-size: 24px; color: var(--c-info); } .forge-dash-empty-title { font-size: var(--fz-lg); font-weight: 600; color: var(--c-text); margin-bottom: 2px; }