/* ---------- @font-face: OpenSans (10 TTF variants from KenergyUI/Kenergy/Assets/Fonts/) ---------- */ @font-face { font-family: "Open Sans"; src: url('fonts/OpenSans-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Open Sans"; src: url('fonts/OpenSans-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: "Open Sans"; src: url('fonts/OpenSans-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Open Sans"; src: url('fonts/OpenSans-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Open Sans"; src: url('fonts/OpenSans-Semibold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Open Sans"; src: url('fonts/OpenSans-SemiboldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; font-display: swap; } @font-face { font-family: "Open Sans"; src: url('fonts/OpenSans-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Open Sans"; src: url('fonts/OpenSans-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: "Open Sans"; src: url('fonts/OpenSans-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: "Open Sans"; src: url('fonts/OpenSans-ExtraBoldItalic.ttf') format('truetype'); font-weight: 800; font-style: italic; font-display: swap; } /* Kenergy brand palette from KenergyUI/Kenergy/App.axaml */ :root { --kiq-basic: #016FE6; --kiq-basic-light: #019EFF; --kiq-basic-dark: #015CBE; --kiq-basic-gray: #969696; --kiq-basic-white: #FFFFFF; --kiq-basic-background-light: #CCE2FA; --kiq-basic-background-dark: #7FB7F2; --kiq-warning: #FBCA16; --kiq-warning-background-light: #FFF5D8; --kiq-danger: #F62447; --kiq-danger-light: #FF254A; --kiq-danger-dark: #DB203F; --kiq-danger-background-light: #F7DCDC; --kiq-danger-background-dark: #F9C8D0; --kiq-selected: #E3F3FF; --kiq-pointerover: #F7F7F7; /* Secondary palette — the desktop's "secondary" button / chip / input chrome inlines these hex codes across App.axaml (Button.kiq_secondary, ImageButton, ImageToggleButton, ComboBox.period). Tokenizing them here so the web has the same single source of truth the desktop assumes via repetition. */ --kiq-secondary-bg: #F2F6F9; --kiq-secondary-border: #CDD3D9; --kiq-secondary-fg: #4F5766; /* TabItem foreground, ComboBox chevron fill, and progress-spinner glyph — desktop's ubiquitous mid-gray for control chrome (§4.1 "tab text default 595959", "spinner glyph 595959"). Body text uses --kiq-body-color (#4F5766) instead; the two were conflated before but the §4.1 spec treats them as distinct semantics. */ --kiq-text-primary: #595959; --kiq-tab-text-default: #595959; /* §4.1 body text color — slightly darker than --kiq-text-primary; used by the global rule and any surface that explicitly opts in. */ --kiq-body-color: #4F5766; /* §4.1 additional fixed values from App.axaml — locked, not rounded. */ --kiq-tab-hover-border: #BEBEBE; --kiq-disabled-bg: #F0F0F0; --kiq-disabled-fg: #D2D2D2; --kiq-card-shadow-color: #D2D2D2; --kiq-datagrid-row-tint: #F7F7F7; --kiq-chart-axis-line: #DCE1E6; --kiq-tracker-popup-bg: #99000000; --kiq-zoom-accept-fill: #33902537; --kiq-zoom-reject-fill: #332F6931; --kiq-zoom-dash-stroke: #000000; --kiq-zoom-dash-array: 3, 1; --kiq-error-text: #F62447; --kiq-building-import-removed: #B00020; --kiq-building-import-added: #1B5E20; --kiq-building-import-badge-bg: #EEF2FF; /* Non-palette desktop-sourced utility tokens (used by App.axaml-derived styles) */ --kiq-hover: #F7F7F7; /* Single source of truth for the app-wide surface background. Every main structural surface (shell, header, sidebar, body, content, statusbar) routes its background through this token so the whole app stays one consistent color and can be re-themed from one place. */ --kiq-app-bg: var(--kiq-basic-white); --kiq-panel-bg: #F0F0F0; --kiq-tab-header-bg: #F6F6F6; --kiq-stepper-bg: #E5E5E5; /* §4.1 spinner aliases — surface E5E5E5, glyph 595959. Routed through the existing tokens so a future palette swap stays single-source. */ --kiq-spinner-surface: var(--kiq-stepper-bg); --kiq-spinner-glyph: var(--kiq-text-primary); --kiq-focus: #016FE6; /* Material 3 elevation tokens (key umbra + ambient penumbra) — used by surfaces that need a resting shadow. Values match the M3 spec; consume via box-shadow: var(--m3-elevation-N). Shadow color routes through --md-sys-color-shadow per the M3 design-token system so it can be themed without rewriting every elevation token. */ --md-sys-color-shadow: 0, 0, 0; --m3-elevation-0: none; --m3-elevation-1: 0px 1px 2px 0px rgba(var(--md-sys-color-shadow), 0.28), 0px 2px 6px 0px rgba(var(--md-sys-color-shadow), 0.16); --m3-elevation-2: 0px 2px 4px 0px rgba(var(--md-sys-color-shadow), 0.28), 0px 4px 12px 0px rgba(var(--md-sys-color-shadow), 0.20); --m3-elevation-3: 0px 4px 8px 0px rgba(var(--md-sys-color-shadow), 0.24), 0px 10px 24px 0px rgba(var(--md-sys-color-shadow), 0.22); --m3-elevation-4: 0px 6px 12px 0px rgba(var(--md-sys-color-shadow), 0.26), 0px 14px 32px 0px rgba(var(--md-sys-color-shadow), 0.24); --m3-elevation-5: 0px 8px 16px 0px rgba(var(--md-sys-color-shadow), 0.28), 0px 20px 40px 0px rgba(var(--md-sys-color-shadow), 0.26); /* ---------- Design tokens (App.axaml §4) ---------- Single source of truth for typography, spacing, layout, and animation. Consume via var(--kiq-*) rather than re-hardcoding. */ /* §4.2 Typography (12 px default; 16 px Bold #4F5766 card/dialog titles; 10 weights of Open Sans loaded via @font-face above). §4 spec is "no system substitution" — the @font-face TTFs in wwwroot/fonts are the only allowed source, so this token names "Open Sans" alone with no system fallback chain. */ --kiq-font-family: "Open Sans"; --kiq-font-size: 12px; --kiq-title-font-size: 16px; --kiq-title-font-weight: 700; --kiq-title-color: #4F5766; /* Section / parameter-row label = 12 px Bold, default fg #000000. Font-size matches --kiq-font-size but is named separately so callers opting in via `.k-param-label` route through §4 tokens rather than re-stating "12 px Bold" inline. */ --kiq-section-label-font-size: 12px; --kiq-section-label-weight: 700; --kiq-section-label-color: #000000; /* Tracker tooltip = 10 px white on #99000000. */ --kiq-tracker-font-size: 10px; --kiq-tracker-font-color: #FFFFFF; /* Error text = 10 px SemiBold #F62447 (prefixed with U+1F7AB Heavy Ballot X). */ --kiq-error-font-size: 10px; --kiq-error-font-weight: 600; /* §4.3 Card spacing (margin 0 0 0 24, padding 18 14, radius 14, shadow 0 0 10 1 #D2D2D2, border thickness 0). */ --kiq-card-margin: 0 0 24px; --kiq-card-padding: 14px 18px; --kiq-card-radius: 14px; --kiq-card-shadow: 0 0 10px 1px #D2D2D2; --kiq-card-border-thickness: 0; /* Card title-row → content gap 14 px; content → button row gap 28 px (sometimes 18 px). */ --kiq-card-title-gap: 14px; --kiq-card-button-gap: 28px; --kiq-card-button-gap-tight: 18px; --kiq-card-listbox-margin: 0 14px 0 0; /* §4.3 Controls (button gap 11 px, button height ~30 px, min-width 96 px, input height 28 px). */ --kiq-button-gap: 11px; --kiq-button-height: 30px; --kiq-button-min-width: 96px; --kiq-input-height: 28px; /* §4.3 Parameter row primitives (240 px fixed width, 0 0 28 0 padding, inner editor 176 px, NumericUpDownUnits 128 px, 2 px stripe with 16 px gap to label). */ --kiq-param-row-width: 240px; --kiq-param-row-padding: 0 28px 0 0; --kiq-param-editor-width: 176px; --kiq-param-numeric-width: 128px; --kiq-param-stripe-width: 2px; --kiq-param-stripe-margin: 0 16px 0 0; /* §4.3 Layout (tree pane 360 px, splitter 1 px). */ --kiq-tree-pane-width: 360px; --kiq-splitter-width: 1px; /* §4.3 Chart (canvas 250 px tall, plot margin 14 0 14 25). */ --kiq-chart-canvas-height: 250px; --kiq-chart-plot-margin: 14px 0 14px 25px; /* §4.3 Tracker popup (MinWidth 180, MaxHeight 500, CornerRadius 2). */ --kiq-tracker-min-width: 180px; --kiq-tracker-max-height: 500px; --kiq-tracker-radius: 2px; /* §4.3 Dialog widths (parameter editor 320, confirm 420, progress 420, loading 300, building-import 860×560 minimum). */ --kiq-dialog-small-width: 320px; --kiq-dialog-confirm-min-width: 420px; --kiq-dialog-progress-width: 420px; --kiq-dialog-loading-width: 300px; --kiq-dialog-import-min-width: 860px; --kiq-dialog-import-min-height: 560px; /* §4.3 Tab item (MinHeight 36, MinWidth 96; selected = 3 px top border #006FE6). */ --kiq-tab-min-height: 36px; --kiq-tab-min-width: 96px; --kiq-tab-indicator-width: 3px; --kiq-tab-indicator-color: #016FE6; /* §4.4 Animation tokens. - BrushTransition 0.1 s = parameter changed stripe fill swap. - AutoScrollListBox pulse = 1 s infinite loop, LightGray ↔ Orange border. - Notification flash = ~300 ms decay from #009EFF back to #E9E9E9. */ --kiq-brush-transition: 0.1s; --kiq-autoscroll-pulse: 1s; --kiq-autoscroll-pulse-from: lightgray; --kiq-autoscroll-pulse-to: orange; --kiq-flash-decay: 300ms; /* §4.4 progress spinner = 4-frame loop at 250 ms per frame (processing_1..4_x32.png), so the full cycle is 1 s. Consumers route both their `steps(4)` keyframes timing and any per-frame derived sites through these tokens. */ --kiq-spinner-frame-duration: 250ms; --kiq-spinner-cycle: 1s; /* ParameterTextColor palette (Parameters/ParameterTextColor.cs). Canonical hexes from the desktop enum — single source of truth for every parameter text-color modifier (.k-param-value.k-*, .k-text-*, .k-mp-*). */ --kiq-param-text-default: #000000; --kiq-param-text-gray: LightGray; --kiq-param-text-blue: #006FE6; --kiq-param-text-green: #65C128; --kiq-param-text-orange: #FFC800; --kiq-param-text-red: #F62447; /* Parameter row dirty / clean stripe + notification flash from §8.1. */ --kiq-param-stripe-clean: #E9E9E9; --kiq-param-stripe-dirty: #FFB900; --kiq-param-stripe-flash: #009EFF; /* Radzen theme token overrides — remap to Kenergy brand. */ --rz-primary: var(--kiq-basic); --rz-primary-light: var(--kiq-basic-light); --rz-primary-dark: var(--kiq-basic-dark); --rz-primary-lighter: var(--kiq-basic-background-light); --rz-on-primary: #ffffff; --rz-secondary: var(--kiq-basic-gray); --rz-warning: var(--kiq-warning); --rz-danger: var(--kiq-danger); --rz-base-background-color: var(--kiq-basic-white); --rz-text-color: #595959; --rz-text-secondary-color: var(--kiq-basic-gray); --rz-header-height: 48px; --rz-sidebar-width: var(--kiq-tree-pane-width); /* Force Open Sans across every Radzen 10.3.0 component. */ --rz-text-font-family: var(--kiq-font-family); } html, body { background: var(--kiq-app-bg); } body { font-family: var(--kiq-font-family); font-size: var(--kiq-font-size); /* mirrors desktop 12pt default */ color: var(--kiq-body-color); /* §4.1: body text #4F5766 */ } /* ---------- Layout: white header + thin gray separator + 360px sidebar ---------- */ .rz-header { background: var(--kiq-app-bg) !important; color: #1c1c1c !important; border-bottom: 1px solid lightgray !important; box-shadow: none !important; min-height: 48px; height: 48px; padding: 0 12px !important; } .rz-header a, .rz-header .rz-button-text { color: #1c1c1c !important; } .rz-sidebar { background: var(--kiq-app-bg) !important; border-right: 1px solid lightgray !important; padding: 0 !important; } .rz-body { background: var(--kiq-app-bg); } /* ---------- Tree: exact replica of App.axaml TreeViewItem styles ---------- Targets Radzen 10.3.0 DOM: .rz-treenode (item), .rz-treenode-content (row), .rz-tree-toggler (chevron with .rzi-caret-right when collapsed and .rzi-caret-down when expanded), .rz-treenode-leaf (no-children marker). */ .rz-tree, .rz-tree.rz-tree-state-default { padding: 0; border: none; background: transparent; font-family: inherit; font-size: 12px; } .rz-tree ul, .rz-tree-container, .rz-treenode-children { list-style: none; margin: 0; } /* Single node row */ .rz-tree .rz-treenode-content { padding: 2px 12px 2px 6px !important; min-height: 28px !important; display: flex !important; align-items: center; font-size: 12px; line-height: 16px; color: #1A1A1A; border: none !important; border-radius: 0 !important; cursor: pointer; } /* Hover — Kenergy AI design kit (.k-tree-row:hover #F4F8FC). */ .rz-tree .rz-treenode-content:not(.rz-treenode-content-selected):hover, .rz-tree .rz-treenode-content:not(.rz-treenode-content-selected):hover .rz-treenode-label { background: #F4F8FC !important; } /* Selected — Kenergy AI design kit (.k-tree-row.selected #E6F2FB). */ .rz-tree .rz-treenode-content-selected, .rz-tree .rz-treenode-content-selected .rz-treenode-label, .rz-tree .rz-treenode-content-selected:hover, .rz-tree .rz-treenode-content-selected:hover .rz-treenode-label { background: #E6F2FB !important; color: #1A1A1A !important; } /* Expand/collapse chevron — replace Material caret with desktop +/- PNGs. Radzen sets .rzi-caret-right on the toggler when collapsed and .rzi-caret-down when expanded. */ .rz-tree .rz-tree-toggler { width: 16px !important; height: 16px !important; padding: 0 !important; background: transparent !important; border: none !important; line-height: 16px !important; color: transparent !important; text-indent: -9999px; flex-shrink: 0; } .rz-tree .rz-tree-toggler::before { content: ''; display: block; width: 16px; height: 16px; /* KEN-420 §5.3: App.axaml sets Margin="0 0 -4 1" (LTRB) on PART_ExpandCollapseChevron — translate to CSS top/right/bottom/left so the toggler pulls 4 px toward the per-node icon and drops 1 px to align its baseline with the label glyph. */ margin: 0 -4px 1px 0 !important; background-image: url('icons/bullet_toggle_plus_x16.png'); background-repeat: no-repeat; background-position: center; background-size: 16px 16px; text-indent: 0; } .rz-tree .rz-tree-toggler.rzi-caret-down::before { background-image: url('icons/bullet_toggle_minus_x16.png'); } /* Leaf-node toggler space (kept 16px so labels line up) */ .rz-tree .rz-treenode-leaf .rz-tree-toggler { visibility: hidden; } /* Plan-spec nav-tree-item selectors (mirror desktop TreeViewItem hover/selected). */ .nav-tree-item:hover { background: var(--kiq-pointerover); } .nav-tree-item.selected { background: var(--kiq-selected); } /* Custom row layout used by NavTree templates. The row fills the full treenode-label width so long names truncate cleanly rather than expanding the row past the sidebar splitter. */ .rz-tree .rz-treenode-label { flex: 1 1 auto; min-width: 0; } /* Inter-element spacing mirrors the desktop tree templates (MainView.axaml): leading icon -> name is 8px (Image Margin="0 0 8 0"), the item count is 4px (TextBlock Margin="4 0 0 0"), and every other inline element (DeviceId/meta and trailing badge icons) uses the desktop 6px (Margin="6 ...0 0"). */ .ktree-row { display: flex; width: 100%; min-width: 0; align-items: center; padding: 1px 2px; } .ktree-row > * { margin-left: 6px; } .ktree-row > *:first-child { margin-left: 0; } .ktree-row > .ktree-icon + .ktree-name { margin-left: 8px; } .ktree-row > .ktree-count { margin-left: 4px; } .ktree-row .ktree-icon { width: 16px; height: 16px; image-rendering: -webkit-optimize-contrast; flex-shrink: 0; } .ktree-row .ktree-name { color: #1A1A1A; font-size: 12px; min-width: 0; flex: 0 1 auto; } .ktree-row .ktree-count { color: #888; font-size: 12px; flex-shrink: 0; } .ktree-row .ktree-meta { color: #888; font-size: 12px; flex-shrink: 0; } .ktree-row.ktree-inactive, .ktree-row .ktree-inactive, span.ktree-row.ktree-inactive { opacity: .4; } .ktree-row .ktree-err { color: var(--kiq-danger); font-size: 12px; flex-shrink: 0; } /* Status dot — Kenergy AI design kit (.k-tree-row .dot): 8px trailing circle, neutral grey by default, recolored by ok/warn/danger tone classes. */ .ktree-row .ktree-dot { width: 8px; height: 8px; border-radius: 50%; background: #B6B6B6; flex-shrink: 0; display: inline-block; } .ktree-row .ktree-dot.ok { background: #6BC36A; } .ktree-row .ktree-dot.warn { background: #FBCA16; } .ktree-row .ktree-dot.danger { background: #F62447; } .ktree-row .ktree-signal { width: 16px; height: 16px; flex-shrink: 0; } .ktree-row .ktree-logo { object-fit: contain; } /* ---------- Buttons: exact replicas of c:ImageButton styles from App.axaml ---------- */ .rz-button, .rz-button.rz-button-md { font-family: inherit; font-size: 12px !important; text-transform: none !important; box-shadow: none !important; border-radius: 4px !important; min-height: 28px; padding: 4px 16px !important; /* App.axaml buttons set FontSize=12 but no FontWeight → Avalonia default Normal (400). Match it rather than the prior 500. */ font-weight: 400; } /* kiq_primary */ .rz-button.rz-primary { background: var(--kiq-basic) !important; border: 1px solid var(--kiq-basic) !important; color: #fff !important; } .rz-button.rz-primary:hover { background: var(--kiq-basic-light) !important; border-color: var(--kiq-basic-light) !important; } .rz-button.rz-primary:active { background: var(--kiq-basic-dark) !important; border-color: var(--kiq-basic-dark) !important; } .rz-button.rz-primary:disabled { background: #F0F0F0 !important; border-color: #F0F0F0 !important; color: #D2D2D2 !important; } /* kiq_secondary (light gray with brand-blue hover) */ .rz-button.rz-secondary, .rz-button.rz-button-secondary { background: #F2F6F9 !important; border: 1px solid #CDD3D9 !important; color: #4F5766 !important; } .rz-button.rz-secondary:hover, .rz-button.rz-button-secondary:hover { border-color: var(--kiq-basic-light) !important; color: var(--kiq-basic-light) !important; background: #F2F6F9 !important; } .rz-button.rz-secondary:active { background: var(--kiq-basic-background-light) !important; border-color: var(--kiq-basic) !important; color: var(--kiq-basic) !important; } /* kiq_danger / kiq_secondary_danger */ .rz-button.rz-danger { background: var(--kiq-danger) !important; border: 1px solid var(--kiq-danger) !important; color: #fff !important; } .rz-button.rz-danger:hover { background: var(--kiq-danger-light) !important; border-color: var(--kiq-danger-light) !important; } .rz-button.rz-danger:active { background: var(--kiq-danger-dark) !important; border-color: var(--kiq-danger-dark) !important; } .rz-button.rz-warning { background: var(--kiq-warning) !important; border: 1px solid var(--kiq-warning) !important; color: #595959 !important; } /* ---------- ImageButton (c:ImageButton replica) ---------- */ /* Mirrors App.axaml line 957 c:ImageButton: MinWidth=96, Margin="0 0 11 0" (the 11 px is the inter-button right-margin, not the icon→text gap). */ .kiq-image-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #ffffff; border: 1px solid #CDD3D9; color: #4F5766; border-radius: 4px; min-width: 96px; height: 30px; margin-right: 11px; padding: 0 14px; font-size: 12px; font-weight: 400; cursor: pointer; user-select: none; text-decoration: none; transition: border-color .08s ease, color .08s ease, background .08s ease; } .kiq-image-button .kiq-icon { width: 16px; height: 16px; } .kiq-image-button:hover { border-color: var(--kiq-basic-light); color: var(--kiq-basic-light); } .kiq-image-button:active { background: var(--kiq-basic-background-light); border-color: var(--kiq-basic); color: var(--kiq-basic); } .kiq-image-button:disabled { background: #fff; border-color: #D2D2D2; color: #D2D2D2; cursor: not-allowed; } .kiq-image-button:disabled .kiq-icon { filter: var(--kiq-disabled-icon-filter); } .kiq-image-button.kiq-primary { background: var(--kiq-basic); border-color: var(--kiq-basic); color: #fff; } .kiq-image-button.kiq-primary:hover { background: var(--kiq-basic-light); border-color: var(--kiq-basic-light); color: #fff; } .kiq-image-button.kiq-primary:active { background: var(--kiq-basic-dark); border-color: var(--kiq-basic-dark); color: #fff; } .kiq-image-button.kiq-danger { background: #F2F6F9; border-color: #CDD3D9; color: #4F5766; } .kiq-image-button.kiq-danger:hover { border-color: var(--kiq-danger-light); color: var(--kiq-danger-light); } /* App.axaml c:ImageButton.kiq_secondary_danger :pressed fills kiq_basic_background_light (#CCE2FA), keeping only the border+text danger-red. */ .kiq-image-button.kiq-danger:active { background: var(--kiq-basic-background-light); border-color: var(--kiq-danger); color: var(--kiq-danger); } /* ---------- Tabs (.k-tabs) — single source of truth. Applied via class="k-tabs" on every in this app. Mirrors App.axaml TabControl with a bottom-underline indicator. ---------- */ .k-tabs.rz-tabview, .k-tabs .rz-tabview { background: transparent !important; box-shadow: none !important; border: none !important; border-radius: 0 !important; } .k-tabs .rz-tabview-nav { background: #F6F6F6 !important; border: none !important; border-bottom: 1px solid #E0E0E0 !important; /* Side gutter insets the tab row from the panel edge, matching the live-screenshot recreation in the design handoff. */ padding: 0 20px !important; gap: 0 !important; border-radius: 0 !important; } .k-tabs .rz-tabview-nav li, .k-tabs .rz-tabview-nav li.rz-state-default { background: transparent !important; border: none !important; border-top: 3px solid transparent !important; border-left: 1px solid transparent !important; border-right: 1px solid transparent !important; margin: 0 !important; border-radius: 0 !important; min-height: 36px; min-width: 96px; } .k-tabs .rz-tabview-nav li .rz-tabview-title, .k-tabs .rz-tabview-nav li a, .k-tabs .rz-tabview-nav li button { font-family: var(--kiq-font-family) !important; font-size: 12px !important; font-weight: 400 !important; color: #595959 !important; text-transform: none !important; min-height: 36px; min-width: 96px; padding: 0 16px !important; border: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; } .rz-tabview-nav li button { padding-block: 0 !important; } .k-tabs .rz-tabview-nav li:hover:not(.rz-state-active):not(.rz-tabview-selected) { border-top-color: var(--kiq-tab-hover-border) !important; border-left-color: var(--kiq-tab-hover-border) !important; border-right-color: var(--kiq-tab-hover-border) !important; } .k-tabs .rz-tabview-nav li.rz-state-active, .k-tabs .rz-tabview-nav li.rz-tabview-selected { background: #FFFFFF !important; /* Design bundle components-tabs.html: selected tab border-top-color = --kiq_basic (#016FE6, the brand blue). Routed through the indicator token. */ border-top: 3px solid var(--kiq-tab-indicator-color) !important; } .k-tabs .rz-tabview-nav li.rz-state-active a, .k-tabs .rz-tabview-nav li.rz-state-active button, .k-tabs .rz-tabview-nav li.rz-state-active .rz-tabview-title, .k-tabs .rz-tabview-nav li.rz-tabview-selected a, .k-tabs .rz-tabview-nav li.rz-tabview-selected button, .k-tabs .rz-tabview-nav li.rz-tabview-selected .rz-tabview-title { /* selected TabItem only swaps Foreground to Black; FontWeight stays Regular. */ color: #000 !important; font-weight: 400 !important; } .k-tabs .rz-tabview-panels { background: #FFFFFF !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; margin-top: 12px !important; } .k-tabs .rz-tabview-panel { padding: 22px !important; } /* Desktop tab change is instant — kill Radzen transitions (preserves existing spec §5). */ .k-tabs .rz-tabview-panel, .k-tabs .rz-tabview-panels { transition: none !important; animation: none !important; } /* ---------- Card section (CornerRadius=14, BoxShadow 0 0 10 1 #D2D2D2 per App.axaml) ---------- */ .k-card { background: #ffffff; border-radius: var(--kiq-card-radius); box-shadow: var(--kiq-card-shadow); border: none; margin: var(--kiq-card-margin); } .k-card-inner { padding: var(--kiq-card-padding); } /* §13.8: mapping-card variant — same chrome with the desktop's asymmetric Margin="5 5 22 5" (MappingSourceReadOnlyView.axaml): 5px top/left/bottom and a 22px right inset so the card clears the Mapping tab's right gutter. */ .k-card.k-card--mapping { margin: 5px 22px 5px 5px; } /* §9: title row is 16 px Bold #4F5766 with an optional question_tip_x11 help icon to the right; flex so the icon sits next to the text rather than under it. */ .k-section-title { display: flex; align-items: center; gap: 5px; font-size: var(--kiq-title-font-size); font-weight: var(--kiq-title-font-weight); color: var(--kiq-title-color); margin: 0 0 var(--kiq-card-title-gap); } .k-card .k-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: 12px; color: #333; } .k-card .k-row strong { color: var(--kiq-text-primary); min-width: 140px; font-weight: 500; } /* ---------- Action bar ---------- */ .k-action-bar { display: flex; gap: var(--kiq-button-gap); align-items: center; padding: 14px 22px; flex-wrap: wrap; background: #ffffff; } /* ---------- DataGrid: 12px text, kiq_selected hover ---------- */ .rz-data-grid, .rz-data-grid .rz-cell-data { font-size: 12px; } .rz-data-grid .rz-grid-table thead th { background: #F6F6F6; border-bottom: 1px solid lightgray; font-weight: 500; color: #333; } /* Spec §7.8: DataGridRow:nth-child(even) #F7F7F7 — global zebra-striping. */ .rz-data-grid .rz-grid-table tbody tr:nth-child(even) td { background: #F7F7F7; } .rz-data-grid .rz-grid-table tbody tr:hover td { background: var(--kiq-selected) !important; } .rz-data-grid .rz-grid-table tbody tr.rz-state-highlight td { background: var(--kiq-selected) !important; } /* Row-level desktop-style blue outline on hover (mirrors DataGridRow:pointerover BorderBrush kiq_basic_light). */ .rz-data-grid tr:hover { background: var(--kiq-selected); box-shadow: inset 0 0 0 1px var(--kiq-basic-light); } /* Mirror of DeviceOverrideStatusColorConverter (#FFEDB5) — scanned override rows. */ .rz-data-grid .rz-grid-table tbody tr.k-override-row-scanned td { background: #FFEDB5 !important; } /* ---------- Card: lose Material shadow ---------- */ .rz-card { box-shadow: none !important; border: 1px solid #e3e3e3; border-radius: 4px; } /* ---------- Text input: kenergy focus blue ---------- */ /* Spec §7.8: plain TextBox 28px height, border #969696 / focus #006FE6. */ .rz-textbox, .rz-numeric, .rz-form-field input { border-color: #969696 !important; border-radius: 3px !important; font-size: 12px; height: 28px; } .rz-textbox:focus, .rz-numeric:focus, .rz-form-field input:focus { border-color: var(--kiq-focus) !important; outline: none; } /* App.axaml TextBox:pointerover border is also #006FE6 — match focus on hover. */ .rz-textbox:hover, .rz-numeric:hover, .rz-form-field input:hover { border-color: var(--kiq-focus) !important; } /* ---------- Text helpers ---------- */ h1, h2, h3, h4, h5, h6, .rz-text-h1, .rz-text-h2, .rz-text-h3, .rz-text-h4 { color: #111; } .rz-text-h4 { font-size: 16px; font-weight: 600; margin: 0 0 2px; } .rz-text-body2 { color: #595959; font-size: 12px; } /* ---------- Page content padding ---------- */ .rz-body > .rz-p-4 { padding: 12px 16px !important; } /* ---------- K-shell (KEN-364: MainView.axaml structure — 3 rows × 3 cols) ---------- Row 0: 1 px LightGray divider header band (no logo bar, menu, or toolbar). Row 1: horizontal splitter (0 height — structural mirror of the desktop GridSplitter; the header band is fixed, so it has nothing to resize). Row 2: 3-column body (sidebar / vertical splitter / content) — see .k-body. */ .k-shell { display: flex; flex-direction: column; min-height: 100vh; background: var(--kiq-app-bg); } .k-header-band { height: 1px; background: lightgray; width: 100%; flex-shrink: 0; } .k-row-splitter { height: 0; width: 100%; flex-shrink: 0; } /* Main body: sidebar + 1px splitter + 1fr content. Mirrors the desktop MainView.axaml 1px LightGray GridSplitter. Sidebar width is stored per-user in UiSettings and applied as the --kiq-sidebar-width CSS variable on .k-shell. Defaults to 360px. */ .k-body { display: grid; grid-template-columns: var(--kiq-sidebar-width, var(--kiq-tree-pane-width)) var(--kiq-splitter-width) 1fr; grid-template-rows: 1fr; flex: 1; min-height: 0; overflow: hidden; } .k-body .k-sidebar.collapsed { display: none; } .k-body .k-sidebar.collapsed + .k-splitter + .k-content { grid-column: 1 / span 3; } .k-sidebar { background: var(--kiq-app-bg); overflow-y: auto; padding: 0; } .k-splitter { width: var(--kiq-splitter-width); background: lightgray; cursor: col-resize; position: relative; touch-action: none; user-select: none; } .k-splitter::before { content: ''; position: absolute; top: 0; bottom: 0; left: -3px; right: -3px; } .k-splitter.dragging { background: var(--kiq-basic, #016FE6); } /* Desktop convention: the content host (MainView.axaml ContentControl / the TabControl ContentPresenter, Margin={TemplateBinding Padding} where Padding=0) applies NO container gutter — each view owns its own 22px margin. Tabbed pages get their 22px from .rz-tabview-panel below; only the NO-TAB pages (which root directly on a .k-card) take the 22px gutter here. */ .k-content { background: var(--kiq-app-bg); overflow-y: auto; } .k-content:not(:has(> .k-tabs)) { padding: 22px; } /* When a k-tabs tabview is the direct child, the tab panel scrolls internally — mirrors ContentPresenter filling the DockPanel in the desktop App.axaml TabControl template. */ .k-content:has(> .k-tabs) { padding: 0; display: flex; flex-direction: column; overflow: hidden; } .k-content:has(> .k-tabs) .k-tabs.rz-tabview { flex: 1; display: flex; flex-direction: column; overflow: hidden; } .k-content:has(> .k-tabs) .k-tabs .rz-tabview-panels { flex: 1; overflow-y: auto; } /* ---------- Radio + checkbox sizing ---------- */ .rz-radio-button-box, .rz-checkbox-box { border-color: #969696; } /* ---------- Parameter list (replica of desktop ListBox Classes="parameters") ---------- Label stacked above value, arranged as a horizontal flex-wrap that flows across the card and wraps to a new row on overflow. Matches the desktop's Status grid where State / Operation Status / Occupancy State / Occupancy Probability / Space Temperature / Discharge Temperature sit on one row and Heat/Cool Setpoint wrap below. */ .k-param-list { display: flex; flex-wrap: wrap; row-gap: 0; column-gap: 0; background: transparent; margin: 14px 0 0; padding: 0; list-style: none; } .k-param-row { display: flex; flex-direction: column; min-width: 160px; gap: 2px; line-height: 18px; } .k-param-label { color: var(--kiq-section-label-color); font-weight: var(--kiq-section-label-weight); font-size: var(--kiq-section-label-font-size); white-space: nowrap; } .k-param-value { color: var(--kiq-param-text-default); font-weight: 500; font-size: 13px; } .k-param-value.k-green { color: var(--kiq-param-text-green); } .k-param-value.k-orange { color: var(--kiq-param-text-orange); } .k-param-value.k-red { color: var(--kiq-param-text-red); } .k-param-value.k-blue { color: var(--kiq-param-text-blue); } .k-param-value.k-gray { color: var(--kiq-param-text-gray); } a.k-param-value.k-param-link { color: var(--kiq-param-text-blue); text-decoration: none; } a.k-param-value.k-param-link:hover { text-decoration: underline; } /* ---------- ParameterLabelView chrome (replica of ParameterLabelView.axaml) ---------- 2-column grid: 2 px notification bar on the left + body on the right. The bar normally sits at #E9E9E9 and flashes #009EFF for ~300 ms on each value change (driven by the .triggered class in ParameterLabel.razor), with a 0.1 s fade matching the desktop's BrushTransition. */ .k-parameter-label { display: grid; grid-template-columns: 2px 1fr; column-gap: 16px; width: 240px; padding-right: 28px; box-sizing: border-box; } /* spec §8.1: Avalonia BrushTransition uses linear interpolation by default; the editable .k-parameter-bar already pins this explicitly, mirror it on the read-only label bar so the 0.1 s fade between #E9E9E9 / #009EFF / clean matches the desktop's brush ease everywhere a parameter row is rendered. */ .k-parameter-label-bar { display: block; width: 2px; align-self: stretch; background: var(--kiq-param-stripe-clean); transition: background-color var(--kiq-brush-transition) linear; } .k-parameter-label-bar.triggered { background: var(--kiq-param-stripe-flash); } .k-parameter-label-body { display: flex; flex-direction: column; min-width: 0; } .k-parameter-label-header { display: flex; align-items: center; height: 22px; gap: 4px; } .k-parameter-label-value { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px; margin: 2px 0 12px; } /* spec §8.1: ParameterLabelView go-to affordance uses Button.link / Button.external_link with bullet_go_gray_x16 (default) and bullet_go_x16 (hover) — desktop palette swap on pointer-over, not an opacity fade. */ .k-external-link { width: 16px; height: 16px; padding: 0; border: none; background: url('icons/bullet_go_gray_x16.png') center center no-repeat; cursor: pointer; } .k-external-link:hover { background-image: url('icons/bullet_go_x16.png'); } /* ---------- AI Reasoning timeline (replica of ThermostatView.axaml lines 333-440) ---------- */ .k-timeline { display: flex; flex-direction: column; margin: 14px 0 0; max-height: 220px; min-height: 120px; overflow-y: auto; padding-right: 4px; } .k-timeline-row { display: grid; grid-template-columns: auto 24px 1fr; align-items: stretch; min-height: 40px; font-size: 12px; } .k-timeline-time { color: gray; align-self: center; text-align: right; white-space: nowrap; padding-right: 4px; } .k-timeline-track { position: relative; display: flex; align-items: center; justify-content: center; } .k-timeline-track::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: #E0E0E0; } .k-timeline-row:first-child .k-timeline-track::before { top: 50%; } .k-timeline-row:last-child .k-timeline-track::before { bottom: 50%; } .k-timeline-dot { position: relative; width: 10px; height: 10px; border-radius: 50%; background: #4CAF50; z-index: 1; } .k-timeline-dot.release { background: #9E9E9E; } .k-timeline-message { position: relative; padding: 8px 0 8px 8px; align-self: center; color: #1c1c1c; white-space: pre-wrap; word-break: break-word; } /* ReasoningJson tooltip: hover-revealed, Consolas/monospace, capped at 600px (mirrors ThermostatView.axaml ToolTip.FontFamily=Consolas + MaxWidth=600). */ .k-timeline-tooltip { display: none; position: absolute; left: 8px; top: 100%; z-index: 20; margin: 4px 0 0; padding: 5px; max-width: 600px; max-height: 360px; overflow: auto; font-family: Consolas, "Courier New", monospace; font-size: 12px; color: #1c1c1c; background: #FFFFEC; border: 1px solid #C8C8B0; border-radius: 3px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18); white-space: pre-wrap; word-break: break-word; pointer-events: none; } .k-timeline-message:hover .k-timeline-tooltip { display: block; } .k-timeline-empty { text-align: center; color: #BEBEBE; font-size: 12px; padding: 24px 0; } /* ---------- Card buttons row ---------- Desktop Avalonia uses Margin="0 28 0 0" by default, with Margin="0 18 0 0" as the tighter alternative (KEN-394 §9). The default rule emits the 28 px gap; add the --tight modifier where a card uses the 18 px variant. */ .k-card-buttons { display: flex; gap: var(--kiq-button-gap); align-items: center; flex-wrap: wrap; margin-top: var(--kiq-card-button-gap); } .k-card-buttons--tight { margin-top: var(--kiq-card-button-gap-tight); } /* ---------- Spaces tab occupancy text colors ---------- */ .k-occ-occupied { color: var(--kiq-basic); } .k-occ-standby { color: #E08600; } .k-occ-unknown { color: #969696; } /* ---------- Root About tab: expired license banner (mirrors RootView.axaml) ---------- */ .k-license-expired-banner { color: var(--kiq-danger); font-weight: 700; font-size: 12px; margin: 0 0 14px; } /* ---------- Tab toolbar row: Refresh + inline search (mirrors DataGrid DockPanel header) ---------- */ .k-toolbar-row { display: flex; align-items: center; gap: 11px; padding: 0; margin-bottom: 12px; } .k-search-box { flex: 1 1 auto; min-height: 29px; font-size: 12px; padding: 5px 8px; } /* ---------- Device Objects row actions: Refresh / Override / Properties links ---------- */ .k-object-row-actions { display: flex; gap: 10px; align-items: center; } .k-link-button { appearance: none; background: transparent; border: none; padding: 0; color: var(--kiq-basic); font-size: 12px; cursor: pointer; } .k-link-button:hover { text-decoration: underline; } .k-link-button:disabled { color: #B0B0B0; cursor: not-allowed; text-decoration: none; } /* ---------- ThermostatRepository Overview aggregates (mirrors axaml TextBlock row lines 54-128) ---------- */ .k-repo-aggregates { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 0 12px; font-size: 12px; padding: 12px 0 4px; } .k-repo-aggregates .k-agg-label { color: #969696; margin-right: 2px; } .k-repo-aggregates .k-agg-value { color: #1c1c1c; margin-right: 12px; } /* DataGrid cell tint classes — matches ParameterTextColor palette in ParameterList. */ .k-text-red { color: var(--kiq-param-text-red); } .k-text-orange { color: var(--kiq-param-text-orange); } .k-text-green { color: var(--kiq-param-text-green); } .k-text-blue { color: var(--kiq-param-text-blue); } .k-text-gray { color: var(--kiq-param-text-gray); } /* Cloud thermostat device state cell tint — mirrors CloudThermostatDeviceStateColorConverter. */ .k-device-state-online { color: #65C128; } .k-device-state-offline { color: var(--kiq-danger); } .k-device-state-error { color: #E08600; } .k-device-state-unknown { color: #000; } /* ---------- Style-class parity: mirrors App.axaml selectors ---------- */ /* mirrors App.axaml: