/* Import xterm.js default styles */ @import url('https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.css'); /* Import highlight.js theme for YAML code blocks */ @import url('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css'); /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html { height: 100%; margin: 0; padding: 0; background-color: var(--linear-bg); } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--linear-text-primary); line-height: 1.5; -webkit-font-smoothing: antialiased; margin: 0; padding: 0; height: 100vh; background-color: var(--linear-bg); } div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* Linear-inspired styles */ :root { --linear-bg: #ffffff; --linear-bg-secondary: #f1f1f1; --linear-bg-tertiary: #dedede; --linear-border: #e5e5e5; --linear-text-primary: #1a1a1a; --linear-text-secondary: #555555; --linear-text-tertiary: #999999; --linear-blue: #0066ff; --linear-blue-light: #e6f0ff; --linear-green: #00b800; --linear-green-light: #e6ffe6; --linear-red: #ff0000; --linear-red-light: #ffe6e6; --linear-yellow: #ffb800; --linear-yellow-light: #fff7e6; --linear-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); --linear-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.1); --linear-orange: #FFA500; /* Example orange color */ --pill-bg: rgba(0, 0, 0, 0.1); } /* Theme presets override variables via [data-theme] on or */ [data-theme="dark"] { --linear-bg: #0f1115; --linear-bg-secondary: #151922; --linear-bg-tertiary: #1c2230; --linear-border: #2a2f3a; --linear-text-primary: #e6e8ea; --linear-text-secondary: #b3b7bd; --linear-text-tertiary: #8a8f98; --linear-blue: #5b8cff; --linear-blue-light: rgba(91, 140, 255, 0.18); --linear-green: #35c46b; --linear-green-light: rgba(53, 196, 107, 0.18); --linear-red: #ff5d5d; --linear-red-light: rgba(255, 93, 93, 0.18); --linear-yellow: #ffcc66; --linear-yellow-light: rgba(255, 204, 102, 0.18); --linear-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); --linear-shadow-hover: 0 6px 18px rgba(0, 0, 0, 0.55); --pill-bg: rgba(255, 255, 255, 0.12); } [data-theme="mallow"] { /* Mallow brownish: warm, muted browns with subtle purple undertone */ --linear-bg: #f7f3ef; --linear-bg-secondary: #efe8e0; --linear-bg-tertiary: #e4d9cf; --linear-border: #d6c8ba; --linear-text-primary: #3d2f2a; --linear-text-secondary: #5a4b44; --linear-text-tertiary: #8b7a70; --linear-blue: #7a6af5; /* keep accent cool for contrast */ --linear-blue-light: #ebe9ff; --linear-green: #4da674; --linear-green-light: #e6f4ec; --linear-red: #cc5c5c; --linear-red-light: #ffecec; --linear-yellow: #c59a42; --linear-yellow-light: #f8f1dd; --linear-shadow: 0 1px 2px rgba(119, 95, 76, 0.12); --linear-shadow-hover: 0 6px 18px rgba(119, 95, 76, 0.16); } /* Typography */ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--linear-text-primary); line-height: 1.5; -webkit-font-smoothing: antialiased; margin: 0; padding: 0; overflow-y: auto; /* allow page to scroll */ overflow-x: hidden; /* avoid horizontal scroll */ } h1, h2, h3, h4, h5, h6 { font-weight: 600; margin: 0; color: var(--linear-text-primary); } h1 { font-size: 24px; line-height: 1.3; } .status-Running { color: green; } .status-Pending { color: orange; } .status-Failed { color: red; } .deployment-item { border-left: 4px solid #3498db; } .pod-item, .deployment-item { background: var(--bg-secondary); padding: 0.5rem; border-radius: 4px; margin-top: 0.5rem; } .layout { display: flex; min-height: 100vh; } .main-content { flex: 1; padding: 1rem; display: flex; /* lay out header + panes */ flex-direction: column; overflow-x: hidden; /* prevent horizontal page scroll */ overflow-y: visible; /* allow dropdowns to show */ min-height: 0; /* allow children to shrink */ min-width: 0; /* allow children to shrink */ } .shortcut-key { display: inline-flex; align-items: center; justify-content: center; background-color: var(--linear-bg-secondary); color: var(--linear-text-secondary); font-size: 12px; padding: 0px 6px; border-radius: 4px; border: 1px solid var(--linear-border); white-space: nowrap; margin-left: 6px; line-height: 1; font-weight: normal; height: 18px; } .filter-group-button .shortcut-key { font-weight: normal; height: 14px; box-sizing: border-box; } /* Hide shortcut keys in filter history nav when pane is narrow */ @container pane (max-width: 1200px) { .filter-history-nav .shortcut-key { display: none; } } .resource-section.full-width { grid-column: 1 / -1; } .events-list { margin-top: 2rem; background-color: var(--linear-bg-secondary); border-radius: 4px; } .events-container { max-height: none; /* let events grow */ overflow: visible; /* page scrolls instead of inner container */ } .event-item { padding: 0.75rem; margin-bottom: 0.5rem; border-radius: 4px; background-color: var(--linear-bg); border-left: 4px solid #6c757d; } .event-item.normal { border-left-color: #28a745; } .event-item.warning { border-left-color: #ffc107; } .event-item.error { border-left-color: #dc3545; } .event-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; } .event-type { font-weight: bold; text-transform: uppercase; font-size: 0.8rem; } .event-reason { color: var(--linear-text-primary); font-size: 0.9rem; } .event-count { color: var(--linear-text-secondary); font-size: 0.8rem; } .event-object { color: var(--linear-text-primary); font-size: 0.9rem; margin-bottom: 0.5rem; } .event-message { color: var(--linear-text-secondary); font-size: 0.9rem; margin-bottom: 0.5rem; } .event-timestamp { color: var(--linear-text-secondary); font-size: 0.8rem; } .events-truncated { color: var(--linear-text-secondary); font-size: 0.8rem; text-align: center; padding: 0.5rem; border-top: 1px solid #dee2e6; } .show-more-events { width: 100%; padding: 0.5rem; margin-top: 0.5rem; background: none; border: 1px solid #dee2e6; border-radius: 4px; color: #495057; cursor: pointer; font-size: 0.9rem; } .show-more-events:hover { background-color: #e9ecef; } /* Kustomization Status Styles */ .kustomization-status { display: flex; align-items: center; gap: 1rem; margin: 0.5rem 0; } .status-badge.ready { background-color: var(--linear-green); color: #f0fdf4; } .status-badge.not-ready { background-color: var(--linear-red); color: #fef2f2; } .status-badge.reconciling { background-color: var(--linear-blue); color: #eff6ff; } .status-badge.approval-required { background-color: var(--linear-orange); color: #eff6ff; } .status-badge.stalled { background-color: var(--linear-yellow); color: #fffbeb; } .status-badge.unknown { background-color: var(--linear-text-secondary); color: #f9fafb; } .status-badge.suspended { background-color: var(--linear-text-secondary); color: #f3e8ff; } .revision { font-size: 0.875rem; color: #6b7280; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; max-width: 100%; overflow: hidden; text-overflow: ellipsis; padding: 0.25rem; word-wrap: break-word; white-space: normal; } /* Sync status badges - these are used in applicationDetails.tsx */ .status-badge.sync-synced { background-color: #10b981; /* Green */ color: white; } .status-badge.sync-outofsync { background-color: #f59e0b; /* Yellow/Orange */ color: white; } .status-badge.sync-unknown { background-color: #6b7280; /* Gray */ color: white; } /* Health status badges - these are used in applicationDetails.tsx */ .status-badge.health-healthy { background-color: var(--linear-green); /* Green */ color: white; } .status-badge.health-progressing { background-color: var(--linear-blue); /* Blue */ color: white; } .status-badge.health-degraded { background-color: var(--linear-red); /* Red */ color: white; } .status-badge.health-suspended { background-color: var(--linear-purple); /* Purple */ color: white; } .status-badge.health-missing { background-color: var(--linear-yellow); /* Yellow/Orange */ color: white; } .status-badge.health-unknown { background-color: var(--linear-gray); /* Gray */ color: white; } /* Kluctl deployment result summary badges */ .status-badge.kluctl-new { background-color: var(--linear-blue-light); /* Softer blue for new objects */ color: var(--linear-blue); } .status-badge.kluctl-changed { background-color: var(--linear-blue-light); /* Softer blue for changed objects */ color: var(--linear-blue); } .status-badge.kluctl-deleted { background-color: var(--linear-blue-light); /* Softer blue for deleted objects */ color: var(--linear-blue); } .status-badge.kluctl-errors { background-color: var(--linear-red-light); /* Softer red for errors */ color: var(--linear-red); } .status-badge.kluctl-warnings { background-color: var(--linear-yellow-light); /* Softer amber for warnings */ color: var(--linear-yellow); } /* Kustomization Details */ .kustomization-details { display: flex; flex-direction: column; min-height: 100vh; /* allow page to grow */ } .kustomization-header { flex-shrink: 0; padding: 1rem; } .resource-tree-wrapper { flex: 1 0 auto; overflow: visible; /* let content grow vertically */ position: relative; } .header-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .header-left { display: flex; align-items: center; gap: 16px; } .back-button { background: var(--linear-bg-secondary); border: 1px solid var(--linear-border); border-radius: 6px; padding: 8px 12px; color: var(--linear-text-secondary); font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 6px; cursor: pointer; transition: all 0.2s ease; } .back-button:hover { background: var(--linear-bg); border-color: var(--linear-text-tertiary); } .back-button .icon { font-size: 16px; } .status-badges { display: flex; flex-wrap: wrap; /* This allows the badges to wrap onto the next line */ gap: 8px; } .status-badge { font-weight: 500; padding: 4px 8px; border-radius: 4px; align-items: center; gap: 4px; } /* Kluctl-specific status badge layout */ .kluctl-status-badge { padding: 0.5px 2px; /* Adjust this to fine-tune Kluctl badge padding */ } /* Health status badges (for kustomization reconciliation) */ .health-badge.true { background: var(--linear-green-light); color: var(--linear-green); } .health-badge.false { background: var(--linear-red-light); color: var(--linear-red); } .health-badge.unknown { background: var(--linear-yellow-light); color: var(--linear-yellow); } .sync-badge { background: var(--linear-bg-secondary); color: var(--linear-text-secondary); } .sync-badge.syncing { background: var(--linear-blue-light); color: var(--linear-blue); } /* Header Actions */ .header-actions { display: flex; gap: 8px; } /* Dropdown container for split buttons */ .dropdown-container { position: relative; display: inline-block; } /* Split button container */ .split-button { display: flex; } /* Context menu within dropdown container */ .dropdown-container .context-menu { width: auto; min-width: 180px; right: 0; left: auto; } /* Sync Button */ .sync-button, .refresh-button { background: var(--linear-bg); border: 1px solid var(--linear-border); border-radius: 6px; padding: 8px 12px; font-size: 14px; font-weight: 500; color: var(--linear-text-secondary); cursor: pointer; transition: all 0.2s ease; } .sync-button:hover, .refresh-button:hover { background: var(--linear-bg-secondary); border-color: var(--linear-text-tertiary); } .sync-button:disabled, .refresh-button:disabled { opacity: 0.5; cursor: default; } .header-info { padding: 16px; background: var(--linear-bg-secondary); } .info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; } .info-item { display: flex; flex-direction: column; gap: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 10px; } .info-item.full-width { grid-column: 1 / -1; } .label { font-size: 13px; color: var(--linear-text-tertiary); font-weight: 500; font-family: sans-serif; } .value { font-size: 12px; color: var(--linear-text-primary); } /* Resource Tree */ .resource-tree-container { position: relative; width: 100%; height: auto; /* allow vertical growth */ overflow: visible; } /* Resource Card Styling */ .resource-card { width: 250px; height: 70px; display: flex; flex-direction: column; position: relative; padding: 8px; box-sizing: border-box; background-color: var(--card-bg-color, var(--linear-bg-secondary)); border-radius: 3.5px; border: 1px solid var(--linear-border); } /* In dark theme, avoid tinted card backgrounds – use neutral surface and accent the border */ [data-theme="dark"] .resource-card { background-color: var(--linear-bg-secondary) !important; border-color: var(--card-accent-color, var(--linear-border)); } .selected-resource .resource-card { background-color: var(--linear-blue-light) !important; border-color: var(--linear-blue); } .resource-card-details { display: flex; justify-content: flex-end; gap: 4px; flex-wrap: wrap; font-size: 8px; } .resource-card-pill { background: var(--pill-bg); padding: 1px 4px; border-radius: 6px; font-size: 12px; color: var(--linear-text-secondary); } .resource-card-header { display: flex; justify-content: space-between; align-items: center; } .resource-type { font-size: 10px; color: var(--linear-text-secondary); } .resource-name { font-weight: bold; font-size: 14px; text-align: center; margin: 4px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .graph-container { position: relative; width: 100%; height: auto; overflow-x: auto; /* horizontal scroll */ overflow-y: visible; /* let page scroll vertically */ cursor: grab; } .graph-container:active { cursor: grabbing; } .graph-svg { display: block; min-width: 100%; height: auto; /* let height be defined by content */ background-color: var(--linear-bg); } .tree-controls { display: flex; align-items: flex-start; gap: 10px; position: absolute; top: 10px; right: 10px; } /* Zoom controls removed */ /* Tree keyboard shortcuts positioned in top right */ .tree-keyboard-shortcuts { z-index: 10; background-color: var(--linear-bg); border: 1px solid var(--linear-border); border-radius: 6px; padding: 8px; box-shadow: var(--linear-shadow); backdrop-filter: blur(4px); display: flex; } .tree-keyboard-shortcuts .keyboard-shortcut-container { position: static; background: none; border: none; padding: 0; margin: 0; box-shadow: none; flex-direction: column; gap: 4px; max-width: 200px; } .tree-keyboard-shortcuts .keyboard-shortcut { background: none; padding: 2px 0; border-radius: 0; border: none; font-size: 11px; justify-content: flex-start; gap: 6px; } /* Loading State */ .loading { display: flex; align-items: center; justify-content: center; min-height: 200px; color: var(--linear-text-tertiary); font-size: 14px; } /* Loading Spinner Component */ .loading-spinner-text { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 14px; line-height: 1.4; opacity: 0.95; padding: 12px; text-align: center; } /* Node and Edge styles - these are used with ResourceTree.tsx */ .node { background: var(--linear-bg); border: 1px solid var(--linear-border); border-radius: 6px; padding: 12px; box-shadow: var(--linear-shadow); transition: all 0.2s ease; } .node:hover { box-shadow: var(--linear-shadow-hover); border-color: var(--linear-text-tertiary); } .node-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .node-title { font-size: 14px; font-weight: 500; color: var(--linear-text-primary); } .node-status { font-size: 12px; padding: 2px 6px; border-radius: 4px; font-weight: 500; } .node-status.true { background: var(--linear-green-light); color: var(--linear-green); } .node-status.false { background: var(--linear-red-light); color: var(--linear-red); } .node-status.unknown { background: var(--linear-yellow-light); color: var(--linear-yellow); } .node-details { font-size: 13px; color: var(--linear-text-secondary); } /* Edge Styles */ .edge { stroke: var(--linear-border); stroke-width: 1px; } .edge:hover { stroke: var(--linear-text-tertiary); stroke-width: 2px; } /* Resource table styles */ .resource-table { width: 100%; border-collapse: separate; /* sticky heads work more reliably */ border-spacing: 0; /* keep same visual look as collapse */ font-size: 0.875rem; overflow: visible; /* allow sticky header to render above tbody */ table-layout: fixed; min-width: 100%; } .resource-table th { text-align: left; font-weight: 700; color: var(--linear-text-primary); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } /* Keep header visible while rows scroll */ .resource-table thead { position: -webkit-sticky; position: sticky; top: 0; z-index: 3; background-color: var(--linear-bg); } .resource-table thead tr { position: -webkit-sticky; position: sticky; top: 0; z-index: 3; } .resource-table thead th { position: -webkit-sticky; position: sticky; top: 0; z-index: 4; background-color: var(--linear-bg); background-clip: padding-box; } .resource-table td { padding: 0.15rem 0rem; color: var(--linear-text-primary); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; /* Enable ellipsis for flexible column widths */ } .resource-table tbody { position: relative; z-index: 1; /* keep rows below sticky header */ } /* All columns including last one use ellipsis - no wrapping */ .resource-table tr.selected td { background-color: #262626; /* Almost black background */ color: #ffffff; /* White text for contrast */ } /* Inactive pane selection: keep a softer highlight using secondary/tertiary tones */ .resource-table tr.selected-inactive td { background-color: var(--linear-bg-tertiary); color: var(--linear-text-primary); } /* Ensure detail container is readable when a row is selected */ .resource-table tr.selected td .second-row { background-color: #1e1e1e !important; border-color: #3a3a3a !important; } /* Detail container styling when selection is inactive */ .resource-table tr.selected-inactive td .second-row { background-color: var(--linear-bg-secondary) !important; border-color: var(--linear-border) !important; } .resource-table .second-row { font-size: 12px; margin-left: 1rem; width: 100%; box-sizing: border-box; display: flex; gap: 50px; padding: 8px 10px; margin: 6px 16px 12px 16px; background: var(--linear-bg-secondary); border: 1px solid var(--linear-border); border-radius: 8px; } .resource-detail-table { border-collapse: separate; /* required */ border-spacing: 20px 0; /* horizontal vertical */ } /* Detail tables inside selected rows should remain readable */ .resource-table tr.selected td .resource-detail-table th, .resource-table tr.selected td .resource-detail-table td { color: #ffffff; } /* Enable wrapping for detail tables */ .resource-detail-table { table-layout: fixed; } .resource-detail-table th, .resource-detail-table td { white-space: normal; overflow-wrap: anywhere; word-break: break-word; } .resource-list-container { width: 100%; height: calc(100vh - 175px); /* subtract header/nav height */ max-height: 100%; overflow-y: hidden; overflow-x: hidden; position: relative; container-type: size; /* Enable container queries */ container-name: resource-list; } td.message-cell, .message-cell { word-wrap: break-word; overflow-wrap: break-word; white-space: normal; word-break: break-all; line-height: 1.4; } td.message-cell { max-width: 0; /* Force the cell to respect the table layout */ padding: 0.5rem 0.25rem; } .message-cell { padding: 0.5rem 0.25rem; } /* View components - used in ViewBar.tsx */ .views { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; min-height: 30px; /* Ensure minimum height consistency */ flex-shrink: 0; /* don't shrink the view selector */ } /* Header section with ViewBar and Context display */ .header-section { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex: 0 0 auto; /* don't grow, take only needed space */ } /* Context dropdown */ .context-dropdown { position: relative; flex-shrink: 0; } /* Context display */ .context-display { display: flex; align-items: center; padding: 5px 10px; background-color: var(--linear-bg-secondary); border: 1px solid var(--linear-border); border-radius: 4px; font-size: 13px; height: 30px; /* Match height with view-pill */ box-sizing: border-box; cursor: pointer; transition: background-color 0.2s ease; } .context-display:hover { background-color: var(--linear-bg); } .context-label { color: var(--linear-text-tertiary); margin-right: 8px; font-weight: 500; } .context-name { color: var(--linear-text-primary); font-weight: 600; margin-right: 8px; } .context-dropdown-arrow { font-size: 10px; color: var(--linear-text-tertiary); margin-right: 8px; margin-top: 2px; } .watch-status { color: var(--linear-green); font-size: 14px; line-height: 1; display: flex; } .watch-status.error { color: var(--linear-red); } /* Context menu */ .context-menu { position: absolute; top: 100%; left: 0; width: 250px; max-height: 300px; overflow-y: auto; background-color: var(--linear-bg); border: 1px solid var(--linear-border); border-radius: 4px; box-shadow: var(--linear-shadow-hover); z-index: 100; margin-top: 4px; } .context-menu-item { padding: 8px 12px; cursor: pointer; display: flex; flex-direction: row; justify-content: space-between; align-items: center; transition: background-color 0.2s ease; } .context-menu-item:hover { background-color: var(--linear-bg-secondary); } .context-menu-item.disabled { opacity: 0.5; cursor: not-allowed; } .context-menu-item.active { background-color: var(--linear-blue-light); } .context-menu-name { font-weight: 500; color: var(--linear-text-primary); margin-bottom: 2px; } .context-menu-details { font-size: 11px; color: var(--linear-text-tertiary); } /* Views container */ .views-container { flex-grow: 1; /* Take all available space */ overflow: visible; /* Allow dropdowns to render outside the container */ } /* View selector + FilterBar row */ .view-filter-row { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--linear-border); flex: 0 0 auto; /* don't grow, take only needed space */ min-width: 0; /* allow shrinking */ flex-wrap: nowrap; /* never wrap to new line */ overflow: visible; /* allow dropdowns to show */ } .vertical-separator { width: 1px; height: 28px; background-color: var(--linear-border); flex-shrink: 0; } .filterbar-flex { flex: 1 1 auto; min-width: 0; overflow: visible; /* Allow dropdowns to show */ display: flex; /* ensure flex layout */ } .view-buttons { display: flex; gap: 0.5rem; flex-wrap: nowrap; /* never wrap to new line */ flex-grow: 1; align-items: center; min-width: 0; /* allow shrinking */ overflow-x: clip; /* hide horizontal overflow */ overflow-y: visible; /* allow dropdowns to show vertically */ } .view-pill-container { position: relative; display: flex; flex-shrink: 0; /* don't shrink view pills */ } .view-delete { margin-left: 0.5rem; cursor: pointer; } .view-delete:hover { background-color: darkgray; /* Change color on hover for feedback */ } .view-pill { display: flex; align-items: center; /* Center items vertically */ justify-content: space-between; /* Space between label and delete icon */ padding: 0.3rem calc(1rem + 2px); border-radius: 5px; background-color: var(--linear-bg); color: var(--linear-text-secondary); font-size: 0.875rem; cursor: pointer; border: 1px solid var(--linear-border); transition: all 0.2s ease; height: 30px; /* Set consistent height */ box-sizing: border-box; white-space: nowrap; /* prevent text wrapping */ flex-shrink: 0; /* don't shrink */ } .view-pill:hover { background-color: var(--linear-bg-secondary); color: var(--linear-text-primary); } .view-pill.selected { background-color: var(--linear-bg-secondary); border: 1px solid var(--linear-border); color: var(--linear-text-primary); } .new-view-form { padding: 1rem; margin-bottom: 1rem; background-color: var(--linear-bg-secondary); border: 1px solid var(--linear-border); border-radius: 5px; display: flex; flex-direction: column; gap: 0.5rem; } .new-view-form input { padding: 0.5rem; border: 1px solid var(--linear-border); border-radius: 4px; font-size: 0.875rem; } .new-view-form input:focus { border-color: var(--linear-blue); outline: none; box-shadow: 0 0 0 2px rgba(0, 102, 255, 0.1); } .new-view-actions { display: flex; justify-content: flex-end; gap: 0.5rem; } .new-view-cancel, .new-view-save, .delete-cancel, .delete-confirm { padding: 0.5rem 1rem; border-radius: 4px; font-size: 0.875rem; cursor: pointer; border: 1px solid var(--linear-border); } .new-view-cancel, .delete-cancel { background-color: var(--linear-bg); color: var(--linear-text-secondary); } .new-view-save, .delete-confirm { background-color: var(--linear-blue); color: white; border-color: var(--linear-blue); } .new-view-save:disabled { background-color: var(--linear-bg-secondary); color: var(--linear-text-tertiary); border-color: var(--linear-border); cursor: not-allowed; } .delete-confirm { background-color: var(--linear-red); border-color: var(--linear-red); } .delete-confirmation { padding: 1rem; margin-bottom: 1rem; background-color: var(--linear-red-light); border: 1px solid var(--linear-red); border-radius: 5px; color: var(--linear-red); } .delete-confirmation p { margin-bottom: 0.5rem; font-weight: 500; } .delete-actions { display: flex; justify-content: flex-end; gap: 0.5rem; } /* Filter Bar Styles */ .filter-bar { display: flex; flex-wrap: nowrap; /* never wrap to new line */ gap: 8px; padding: 8px 0; border-bottom: none; margin-bottom: 0; min-width: 0; /* allow shrinking */ overflow: visible; /* allow dropdowns to show */ } .filter-groups { display: flex; flex: 1 1 auto; flex-wrap: nowrap; /* never wrap to new line */ gap: 8px; min-width: 0; /* allow shrinking */ overflow-x: visible; /* hide horizontal overflow */ overflow-y: visible; /* allow dropdowns to show vertically */ } .filter-history-nav { display: flex; gap: 4px; align-items: center; flex-shrink: 0; /* don't shrink by default (back/forward buttons) */ } /* Only the keyboard shortcuts nav should collapse */ .filter-history-nav:has(.keyboard-shortcut-container) { margin-left: auto; flex-shrink: 1; /* allow shrinking when space is tight */ min-width: 0; /* allow collapsing */ overflow: hidden; /* hide content when collapsed */ /* Hide completely if width becomes too small to show content properly */ container-type: inline-size; } /* Use container query to hide shortcuts when too narrow for full display */ @container (max-width: 120px) { .filter-history-nav .keyboard-shortcut-container { display: none; } } .filter-loading-indicator { display: flex; align-items: center; padding: 4px 8px; flex-shrink: 0; /* don't shrink */ white-space: nowrap; /* prevent text wrapping */ } .filter-spinner-text { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 13px; color: var(--linear-text-secondary); font-weight: 500; white-space: nowrap; /* prevent text wrapping */ } .filter-resource-count { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 12px; color: var(--linear-text-tertiary); font-weight: 500; white-space: nowrap; /* prevent text wrapping */ } .filter-group { position: relative; flex-shrink: 0; /* don't shrink individual filter pills */ } .filter-group-button { background-color: var(--linear-bg); border: 1px solid var(--linear-border); border-radius: 4px; padding: 4px 8px; font-size: 14px; cursor: pointer; color: var(--linear-text-primary); transition: all 0.2s ease; white-space: nowrap; max-width: 300px; overflow: hidden; text-overflow: ellipsis; } .filter-group-button:hover { background-color: var(--linear-bg-secondary); } .filter-group-button.has-active-filters { background-color: var(--linear-blue-light); border-color: var(--linear-blue); color: var(--linear-blue); font-weight: 500; max-width: none; } /* Inline Save View controls in ViewBar */ .filter-inline-controls .filter-text-input { border: none; padding: 0; background: transparent; } .filter-inline-controls .filter-group-button { max-width: none; overflow: visible; text-overflow: clip; } .filter-options { position: absolute; top: 100%; left: 0; z-index: 50; background-color: var(--linear-bg); border: 1px solid var(--linear-border); border-radius: 4px; padding: 0; box-shadow: var(--linear-shadow-hover); display: flex; flex-direction: column; min-width: 200px; margin-top: 4px; max-height: 300px; overflow: hidden; } .filter-options-search-container { position: sticky; top: 0; z-index: 1; background-color: var(--linear-bg); padding: 8px; border-bottom: 1px solid var(--linear-border); } .filter-options-search-container .filter-text-input { width: 100%; box-sizing: border-box; } .filter-options-scroll-container { overflow-y: auto; overflow-x: hidden; padding: 8px; display: flex; flex-direction: column; gap: 4px; max-height: 250px; } .filter-option { display: flex; align-items: center; background-color: var(--linear-bg); border: 1px solid var(--linear-border); border-radius: 4px; padding: 4px 8px; font-size: 13px; cursor: pointer; text-align: left; color: var(--linear-text-primary); transition: all 0.2s ease; } .filter-option:hover { background-color: var(--linear-bg-secondary); } .filter-option.active { background-color: var(--linear-blue-light); border-color: var(--linear-blue); font-weight: 500; } .filter-option.highlighted { background-color: var(--linear-blue-light); border-color: var(--linear-blue); } .filter-option.active.highlighted { background-color: var(--linear-blue); color: white; } .checkbox { display: inline-flex; justify-content: center; align-items: center; width: 14px; height: 14px; border: 1px solid var(--linear-border); border-radius: 3px; margin-right: 8px; font-size: 11px; color: var(--linear-bg); } .filter-option.active .checkbox { background-color: var(--linear-blue); border-color: var(--linear-blue); } .filter-text-input input { width: 100%; padding: 6px 8px; border: 1px solid var(--linear-border); border-radius: 4px; font-size: 13px; color: var(--linear-text-primary); background-color: var(--linear-bg); box-sizing: border-box; } .filter-text-input input:focus { outline: none; border-color: var(--linear-blue); box-shadow: 0 0 0 2px rgba(0, 102, 255, 0.1); } .active-filters { display: flex; flex-wrap: wrap; gap: 8px; } .resource-table-wrapper { flex: 1; overflow-y: auto; height: calc(100vh - 215px); width: 100%; position: relative; /* create stacking context for sticky header z-index */ margin-top: 8px; } .no-results { display: flex; align-items: center; justify-content: center; padding: 2rem; color: var(--linear-text-tertiary); font-size: 14px; font-style: italic; } /* Resource Drawer Styles */ .resource-drawer-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: flex-end; z-index: 1000; } .resource-drawer { width: 80%; height: 100%; background-color: var(--linear-bg); box-shadow: -2px 0 10px rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; animation: slide-in 0.1s ease-out; } @keyframes slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } } .resource-drawer-header { padding: 16px; border-bottom: 1px solid var(--linear-border); display: flex; justify-content: space-between; align-items: center; } .drawer-title { font-size: 18px; font-weight: 600; color: var(--linear-text-primary); } .drawer-close { background: none; border: none; color: var(--linear-text-tertiary); font-size: 24px; cursor: pointer; padding: 0; margin: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 4px; } .drawer-close:hover { background-color: var(--linear-bg-secondary); color: var(--linear-text-primary); } .drawer-tabs { display: flex; border-bottom: 1px solid var(--linear-border); overflow-x: auto; } .drawer-tab { padding: 12px 20px; font-size: 14px; border: none; background: none; cursor: pointer; color: var(--linear-text-secondary); border-bottom: 2px solid transparent; transition: all 0.2s ease; white-space: nowrap; } .drawer-tab:hover { color: var(--linear-text-primary); background-color: var(--linear-bg-secondary); } .drawer-tab.active { color: var(--linear-blue); border-bottom: 2px solid var(--linear-blue); font-weight: 500; } .drawer-tab.disabled { opacity: 0.5; cursor: default; } .drawer-tab.disabled:hover { color: var(--linear-text-secondary); background-color: transparent; } .drawer-content { flex: 1; overflow: auto; /* Allow scrolling at this level */ padding: 1rem; height: calc(100vh - 120px); /* Account for header and padding */ display: flex; flex-direction: column; } /* Reduce padding in the drawer to maximize content space */ .drawer-content .logs-controls { margin-bottom: 0.5rem; padding: 0.5rem; flex-shrink: 0; /* Prevent shrinking */ } /* Make space for resource errors to show at the bottom of the diff */ .drawer-content .resource-errors { margin-top: 1rem; flex-shrink: 0; } .drawer-loading { display: flex; align-items: center; justify-content: center; height: 100px; font-style: italic; color: var(--linear-text-secondary); } .helm-history-table { width: 100%; border-collapse: collapse; margin-top: 1rem; } .helm-history-table th { background-color: var(--linear-bg-secondary); text-align: left; padding: 0.75rem; font-weight: 600; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 0.9rem; color: var(--linear-text-secondary); border-bottom: 1px solid var(--linear-border); position: sticky; top: 0; } .helm-history-table td { padding: 0.75rem; border-bottom: 1px solid var(--linear-border); vertical-align: middle; line-height: 1.4; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 0.9rem; color: var(--linear-text-primary); } .helm-history-table tr:hover td { background-color: var(--linear-bg-secondary); } .no-history { padding: 2rem; text-align: center; color: var(--linear-text-secondary); font-style: italic; } .no-values { padding: 2rem; text-align: center; color: var(--linear-text-secondary); font-style: italic; } /* Helm History Diff Styles */ .diff-divider-row { height: 0; /* Minimal height */ border: none; position: relative; /* Add this to support absolute positioning */ } .diff-divider-cell { padding: 0 !important; height: 0; position: relative; border: none !important; } /* Update the diff button container position */ .diff-button-container { position: absolute; top: 0; left: 30px; /* Adjust left position */ transform: translate(0, -50%); /* Center vertically */ z-index: 10; /* Higher z-index to ensure it's on top */ display: flex; width: auto; } .diff-button-group { display: flex; border-radius: 5px; overflow: hidden; border: 1px solid var(--linear-border); background-color: var(--linear-bg); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .diff-button-label { display: flex; align-items: center; padding: 0.2rem 0.5rem; font-size: 0.75rem; color: var(--linear-text-tertiary); font-weight: 500; } .diff-button { background-color: var(--linear-bg); color: var(--linear-text-secondary); border: none; border-right: 1px solid var(--linear-border); padding: 0.1rem 0.25rem 0.1rem 0.25rem; font-size: 0.75rem; cursor: pointer; transition: all 0.1s ease; white-space: nowrap; } .diff-button:last-child { border-right: none; } .diff-button:hover { background-color: var(--linear-bg-secondary); color: var(--linear-text-primary); } .diff-button.active { background-color: var(--linear-bg-secondary); color: var(--linear-text-primary); font-weight: 500; } .diff-content-row { background-color: var(--linear-bg-secondary); } .diff-content-cell { padding: 1rem !important; } .diff-content { width: 100%; overflow: auto; background-color: var(--linear-bg-secondary); border-radius: 4px; margin-top: 1rem; } /* New styles for foldable diff sections */ .diff-file-section { margin-bottom: 0.75rem; border: 1px solid var(--linear-border); border-radius: 4px; overflow: hidden; background-color: var(--linear-bg); } .diff-file-header { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0.75rem; background-color: var(--linear-bg-secondary); cursor: pointer; border-bottom: 1px solid var(--linear-border); font-weight: 500; } .diff-file-header:hover { background-color: var(--linear-bg-tertiary); } .diff-file-info { display: flex; align-items: center; gap: 0.5rem; } .diff-file-name { font-weight: 600; color: var(--linear-text-primary); font-size: 0.875rem; } .diff-file-status { font-size: 0.75rem; padding: 0.15rem 0.4rem; border-radius: 10px; font-weight: bold; } .status-created { color: var(--linear-green); } .status-deleted { color: var(--linear-red); } .status-unchanged { color: var(--linear-blue); } .status-modified { display: flex; gap: 0.4rem; } .added-count { color: var(--linear-green); font-weight: bold; } .removed-count { color: var(--linear-red); font-weight: bold; } .diff-file-toggle { color: var(--linear-text-secondary); font-size: 0.75rem; width: 16px; margin-right: 4px; display: flex; align-items: center; justify-content: center; } .diff-file-content { max-height: 500px; overflow: auto; border-top: 1px solid var(--linear-border); } .patch-diff { padding: 1rem; font-family: 'Menlo', 'Monaco', 'Courier New', monospace; font-size: 13px; line-height: 1.5; white-space: pre; overflow-x: auto; background-color: var(--linear-bg-secondary); } .diff-patch { width: 100%; overflow-x: auto; font-family: 'Menlo', 'Monaco', 'Courier New', monospace; font-size: 13px; line-height: 1.5; white-space: pre; padding: 0.5rem; } /* Helm History Table */ .helm-history-table tr.selected-revision td { background-color: var(--linear-blue-light); } .helm-history-table tr:hover td { background-color: var(--linear-bg-secondary); } /* Make the revision column wider to fit the buttons */ .helm-history-table th:first-child, .helm-history-table td:first-child { width: 130px; /* Increase width of revision column */ min-width: 130px; } .expand-context { background-color: var(--linear-bg-secondary); color: var(--linear-text-primary); border: none; padding: 0.25rem 0.5rem; } .expand-context:hover { background-color: var(--linear-bg-tertiary); } .expand-context:active { background-color: var(--linear-bg-tertiary); } /* Diff Drawer Styles */ .diff-drawer { width: 90vw; max-width: 1200px; height: 90vh; max-height: 800px; } .diff-info { margin-top: 8px; } .source-info { font-size: 14px; color: var(--linear-text-secondary); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } .tab-button { background: none; border: none; padding: 12px 16px; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--linear-text-secondary); border-bottom: 2px solid transparent; transition: all 0.2s ease; } .tab-button:hover { color: var(--linear-text-primary); background: var(--linear-bg-secondary); } .tab-button.active { color: var(--linear-blue); border-bottom-color: var(--linear-blue); } .diff-summary { display: flex; flex-direction: column; gap: 16px; height: 100%; } .summary-stats { display: flex; gap: 24px; padding: 16px; background: var(--linear-bg-secondary); border-radius: 8px; border: 1px solid var(--linear-border); } .stat-item { display: flex; flex-direction: column; gap: 4px; } .stat-label { font-size: 12px; color: var(--linear-text-secondary); font-weight: 500; } .stat-value { font-size: 18px; font-weight: 600; color: var(--linear-text-primary); } .stat-value.added { color: var(--linear-blue); } .stat-value.modified { color: var(--linear-yellow); } .stat-value.deleted { color: var(--linear-red); } .resource-list { flex: 1; overflow-y: auto; border: 1px solid var(--linear-border); border-radius: 8px; } .resource-item { padding: 12px 16px; border-bottom: 1px solid var(--linear-border); cursor: pointer; transition: background-color 0.2s ease; } .resource-item:hover { background: var(--linear-bg-secondary); } .resource-item:last-child { border-bottom: none; } .resource-header { display: flex; justify-content: space-between; align-items: center; } .resource-name { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 14px; color: var(--linear-text-primary); } .resource-status { font-size: 12px; font-weight: 500; text-transform: uppercase; } .diff-detail { height: 100%; display: flex; flex-direction: column; } .select-resource { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 16px; color: var(--linear-text-secondary); } .back-to-summary { background: var(--linear-bg-secondary); border: 1px solid var(--linear-border); border-radius: 6px; padding: 8px 16px; color: var(--linear-text-secondary); font-size: 14px; cursor: pointer; transition: all 0.2s ease; } .back-to-summary:hover { background: var(--linear-bg); border-color: var(--linear-text-tertiary); color: var(--linear-text-primary); } .resource-detail { height: 100%; display: flex; flex-direction: column; } .resource-detail-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--linear-border); } .resource-detail-header h3 { margin: 0; font-size: 16px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; color: var(--linear-text-primary); } .yaml-diff { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; overflow: hidden; } .yaml-section { display: flex; flex-direction: column; border: 1px solid var(--linear-border); border-radius: 8px; overflow: hidden; } .yaml-section h4 { margin: 0; padding: 12px 16px; background: var(--linear-bg-secondary); border-bottom: 1px solid var(--linear-border); font-size: 14px; font-weight: 500; color: var(--linear-text-primary); } .yaml-content { flex: 1; margin: 0; padding: 16px; background: var(--linear-bg); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; line-height: 1.5; color: var(--linear-text-primary); overflow: auto; white-space: pre-wrap; word-wrap: break-word; } .loading-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 16px; color: var(--linear-text-secondary); } .loading-spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid rgba(0, 0, 0, 0.1); border-radius: 50%; border-top-color: var(--linear-blue); animation: spin 1s ease-in-out infinite; margin-bottom: 0.5rem; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .no-data { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--linear-text-secondary); } /* Resource errors styling */ .resource-errors { margin-top: 16px; padding: 16px; background-color: var(--linear-red-light); border: 1px solid var(--linear-red); border-radius: 8px; color: var(--linear-text-primary); } .resource-errors h4 { margin-top: 0; margin-bottom: 8px; color: var(--linear-red); font-weight: 600; font-size: 14px; } .resource-errors ul { list-style-type: none; padding: 0; margin: 0; } .error-item { padding: 4px 0; font-size: 13px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } .error-item:not(:last-child) { border-bottom: 1px solid rgba(220, 38, 38, 0.2); padding-bottom: 8px; margin-bottom: 8px; } /* Conditions YAML section */ .conditions-yaml { background-color: var(--linear-bg); border-radius: 4px; padding: 12px; margin: 8px 0; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.9rem; color: var(--linear-text-primary); white-space: pre-wrap; overflow-x: auto; border: 1px solid var(--linear-border); max-height: 300px; } /* Allow plan text to grow vertically without scrolling */ .conditions-yaml.plan-text { max-height: none; overflow: visible; } .info-item details summary { cursor: pointer; color: var(--linear-text-secondary); font-weight: 500; user-select: none; } .info-item details summary:hover { color: var(--linear-text-primary); } .diff-line-added { background-color: rgba(0, 184, 0, 0.1); color: var(--linear-green); white-space: pre; padding: 2px 4px; } .diff-line-removed { background-color: rgba(255, 0, 0, 0.1); color: var(--linear-red); white-space: pre; padding: 2px 4px; } .diff-line-info { white-space: pre; padding: 2px 4px; } /* New diff hunk styles */ .diff-hunks { display: flex; flex-direction: column; gap: 16px; } .diff-hunk { border: 1px solid var(--linear-border); border-radius: 6px; background: var(--linear-bg); overflow: hidden; } .diff-line-context { display: flex; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; line-height: 1.4; border-bottom: 1px solid rgba(0, 0, 0, 0.05); background: var(--linear-bg); } .diff-line-added { display: flex; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; line-height: 1.4; border-bottom: 1px solid rgba(0, 0, 0, 0.05); background-color: rgba(0, 184, 0, 0.1); color: var(--linear-text-primary); } .diff-line-removed { display: flex; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; line-height: 1.4; border-bottom: 1px solid rgba(0, 0, 0, 0.05); background-color: rgba(255, 0, 0, 0.1); color: var(--linear-text-primary); } .line-number { display: inline-block; width: 50px; text-align: right; padding: 4px 8px; color: var(--linear-text-tertiary); border-right: 1px solid rgba(0, 0, 0, 0.1); user-select: none; background: var(--linear-bg-secondary); } .line-number.old { border-right: 1px solid rgba(0, 0, 0, 0.1); } .line-number.new { border-right: 1px solid rgba(0, 0, 0, 0.1); } .line-content { flex: 1; padding: 4px 8px; white-space: pre; overflow-x: auto; } .diff-expand-line { display: flex; align-items: center; justify-content: center; padding: 8px; background: var(--linear-bg-secondary); border-top: 1px solid var(--linear-border); border-bottom: 1px solid var(--linear-border); } .diff-expand-button { background: var(--linear-bg); border: 1px solid var(--linear-border); border-radius: 4px; padding: 6px 12px; font-size: 12px; color: var(--linear-text-secondary); cursor: pointer; transition: all 0.2s ease; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } .diff-expand-button:hover { background: var(--linear-blue-light); border-color: var(--linear-blue); color: var(--linear-blue); } .view-right-section { display: flex; align-items: center; justify-content: flex-end; gap: 14px; flex-shrink: 0; /* Don't shrink */ } .settings-button { background: var(--linear-bg); border: 1px solid var(--linear-border); border-radius: 6px; padding: 6px 10px; font-size: 14px; color: var(--linear-text-secondary); cursor: pointer; transition: all 0.2s ease; } .settings-button:hover { background: var(--linear-bg-secondary); border-color: var(--linear-text-tertiary); color: var(--linear-text-primary); } /* Settings Modal (VS Code-like) A simple two-column table with key and value */ .settings-modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; z-index: 2000; } .settings-modal { width: 720px; max-width: 95vw; max-height: 85vh; background: var(--linear-bg); border: 1px solid var(--linear-border); border-radius: 8px; box-shadow: var(--linear-shadow-hover); display: flex; flex-direction: column; } .settings-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--linear-border); } .settings-title { font-size: 16px; font-weight: 600; color: var(--linear-text-primary); } .settings-close { background: none; border: none; color: var(--linear-text-tertiary); font-size: 22px; cursor: pointer; padding: 2px 6px; border-radius: 4px; } .settings-close:hover { background: var(--linear-bg-secondary); color: var(--linear-text-primary); } .settings-content { padding: 12px 16px; overflow: auto; } .settings-table { width: 100%; border-collapse: collapse; } .settings-table thead th { text-align: left; font-weight: 600; color: var(--linear-text-secondary); font-size: 12px; border-bottom: 1px solid var(--linear-border); padding: 8px; } .settings-table tbody td { padding: 10px 8px; border-bottom: 1px solid var(--linear-border); vertical-align: middle; } .settings-key { width: 45%; color: var(--linear-text-primary); font-weight: 500; } .settings-value { width: 55%; } .settings-value select, .settings-value input[type="text"] { width: 100%; box-sizing: border-box; background-color: var(--linear-bg); color: var(--linear-text-primary); border: 1px solid var(--linear-border); border-radius: 4px; padding: 6px 8px; font-size: 13px; } /* Theme selector */ .theme-selector select { background-color: var(--linear-bg); color: var(--linear-text-primary); border: 1px solid var(--linear-border); border-radius: 4px; padding: 4px 8px; height: 30px; } /* Keyboard Shortcuts Container Styles */ .keyboard-shortcut-container { display: flex; align-items: center; margin-left: auto; gap: 14px; flex-wrap: nowrap; /* don't wrap */ margin-top: 4px; flex-shrink: 0; /* don't shrink partially - hide completely via container query instead */ white-space: nowrap; /* prevent text wrapping */ } .keyboard-shortcut { display: flex; align-items: center; gap: 6px; color: var(--linear-text-secondary); font-size: 13px; } .shortcut-description { color: var(--linear-text-primary); } /* Hide shortcut descriptions on smaller screens */ @media (max-width: 1400px) { .filter-history-nav .keyboard-shortcut-container .shortcut-description { display: none; } } /* Keep shortcut keys visible on smaller screens; hide only descriptions */ @media (max-width: 1100px) { .filter-history-nav .keyboard-shortcut-container .shortcut-description { display: none; } } /* Hide resource action shortcuts when container height is limited */ @container resource-list (max-height: 200px) { .keyboard-shortcut-container { display: none; } } /* Hide filter label prefixes when pane height is limited */ @container pane (max-width: 1200px) { .filter-label-prefix { display: none; } } /* Also hide on very small vertical screens (viewport-based fallback) */ @media (max-height: 600px) { .keyboard-shortcut-container { display: none; } } /* Disabled shortcut styling */ .keyboard-shortcut.disabled .shortcut-description, .shortcut-description.disabled, .shortcut-key.disabled { color: var(--linear-text-tertiary); opacity: 0.6; } .describe-content, .yaml-content, .logs-content { margin: 0; padding: 16px; background-color: var(--linear-bg-secondary); border-radius: 4px; overflow-x: auto; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 13px; color: var(--linear-text-primary); white-space: pre-wrap; line-height: 1.5; max-height: calc(100vh - 200px); } .no-events, .no-logs { padding: 32px; text-align: center; color: var(--linear-text-tertiary); font-size: 14px; } /* Log Controls Styles */ .logs-controls { margin-bottom: 16px; display: flex; flex-direction: column; gap: 12px; background-color: var(--linear-bg-secondary); border-radius: 4px; padding: 12px; } .logs-options-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px; } .logs-controls label { font-size: 14px; color: var(--linear-text-secondary); font-weight: 500; margin-right: 2px; } .logs-controls optgroup { font-weight: 600; color: var(--linear-text-secondary); font-style: normal; padding: 4px 0; } .logs-controls option { padding: 4px 8px; font-weight: normal; } .logs-controls select { padding: 8px; border: 1px solid var(--linear-border); border-radius: 4px; background-color: var(--linear-bg); color: var(--linear-text-primary); font-size: 13px; min-width: 120px; } .logs-follow-controls { display: flex; gap: 8px; padding-bottom: 8px; } .logs-follow-controls label { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 14px; color: var(--linear-text-secondary); } .logs-content { margin: 0; padding: 16px; background-color: var(--linear-bg-secondary); border-radius: 4px; overflow-x: auto; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 13px; color: var(--linear-text-primary); white-space: pre-wrap; line-height: 1.5; max-height: calc(100vh - 280px); /* Adjusted for log controls height */ } .log-line { display: flex; padding: 1px 0; } /* Add left padding to log messages when metadata is hidden */ .log-line .log-message:first-child { padding-left: 4px; border-left: 2px solid transparent; } .log-timestamp { color: #6a9955; margin-right: 8px; flex-shrink: 0; user-select: none; -webkit-user-select: none; } .log-container { margin-right: 8px; font-weight: bold; flex-shrink: 0; user-select: none; -webkit-user-select: none; } .log-message { flex-grow: 1; white-space: pre-wrap; word-break: break-all; user-select: text; } .log-message.nowrap { white-space: pre; word-break: normal; } .json-log { font-family: monospace; white-space: pre-wrap; } .json-filter-input { max-width: 150px; padding: 2px 4px; border: 1px solid #666; border-radius: 3px; background: #333; color: #fff; } @media (max-width: 768px) { .logs-options-row { flex-direction: column; align-items: flex-start; } .json-format-controls { margin-top: 8px; } } .no-diff { padding: 1rem; text-align: center; color: var(--linear-text-secondary); font-style: italic; } /* Error Display Styles */ .error-container { background: var(--linear-red-light); border: 1px solid var(--linear-red); border-radius: 4px; } .error-content { color: var(--linear-red); padding: 1rem; } .error-message { font-weight: 500; margin-bottom: 1rem; line-height: 1.5; font-size: 14px; } .error-timestamp { font-size: 12px; } /* Custom compact styles for logs viewer */ .logs-filter-group { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .logs-select-container { display: flex; align-items: center; white-space: nowrap; } .logs-select-container label { margin-right: 4px; font-weight: 500; } .logs-select-container select { min-width: 100px; padding: 4px 6px; } /* Pod dropdown specific styles */ .pod-select { max-width: 150px; text-overflow: ellipsis; overflow: hidden; } select.pod-select option { max-width: none; width: auto; overflow: visible; } /* Container for pod dropdown when open */ select.pod-select[size]:not([size="1"]) { max-width: 300px; width: auto; } .logs-follow-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-left: auto; } .logs-follow-controls label { display: flex; align-items: center; margin: 0; white-space: nowrap; cursor: pointer; user-select: none; gap: 2px; } .logs-follow-controls label span { font-size: 13px; } .logs-follow-controls input[type="checkbox"] { margin: 0; } .json-filter-input { width: 120px; padding: 2px 5px; margin-left: 4px; font-size: 13px; } /* Make logs controls more compact in drawer */ .drawer-content .logs-controls { padding: 8px; margin-bottom: 8px; } .drawer-content .logs-options-row { gap: 8px; } /* Search Toggle Button */ .search-toggle-button { padding: 4px 8px; border: 1px solid var(--linear-border); border-radius: 4px; background-color: var(--linear-bg); color: var(--linear-text-secondary); font-size: 13px; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; margin-left: 8px; } .search-toggle-button:hover { background-color: var(--linear-bg-secondary); color: var(--linear-text-primary); } /* Log Search Styles */ .logs-search-row { display: flex; margin-top: 8px; margin-bottom: 8px; border-top: 1px solid var(--linear-border); border-bottom: 1px solid var(--linear-border); padding: 8px 0; background-color: rgba(0, 102, 255, 0.02); } .logs-search-container { display: flex; align-items: center; gap: 8px; width: 100%; flex-wrap: wrap; } .logs-search-input { flex: 1; min-width: 200px; padding: 6px 8px; border: 1px solid var(--linear-border); border-radius: 4px; font-size: 13px; color: var(--linear-text-primary); background-color: var(--linear-bg); } .logs-search-input:focus { outline: none; border-color: var(--linear-blue); box-shadow: 0 0 0 2px rgba(0, 102, 255, 0.1); } .search-controls { display: flex; align-items: center; gap: 4px; } .search-type-button { padding: 4px 8px; border: 1px solid var(--linear-border); border-radius: 4px; background-color: var(--linear-bg); color: var(--linear-text-secondary); font-size: 12px; cursor: pointer; transition: all 0.2s ease; } .search-type-button:hover { background-color: var(--linear-bg-secondary); color: var(--linear-text-primary); } .search-type-button.active { background-color: var(--linear-blue); color: white; border-color: var(--linear-blue); } .case-sensitive-toggle { display: flex; align-items: center; gap: 4px; cursor: pointer; font-size: 12px; color: var(--linear-text-secondary); padding: 4px 6px; border: 1px solid var(--linear-border); border-radius: 4px; background-color: var(--linear-bg); transition: all 0.2s ease; } .case-sensitive-toggle:hover { background-color: var(--linear-bg-secondary); color: var(--linear-text-primary); } .case-sensitive-toggle input { margin: 0; } .search-navigation { display: flex; align-items: center; gap: 4px; margin-left: auto; } .search-results { font-size: 12px; color: var(--linear-text-secondary); margin-right: 8px; white-space: nowrap; } .search-nav-button { padding: 4px 6px; border: 1px solid var(--linear-border); border-radius: 4px; background-color: var(--linear-bg); color: var(--linear-text-secondary); font-size: 12px; cursor: pointer; transition: all 0.2s ease; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; } .search-nav-button:hover:not(:disabled) { background-color: var(--linear-bg-secondary); color: var(--linear-text-primary); } .search-nav-button:disabled { opacity: 0.5; cursor: not-allowed; } .search-clear-button { padding: 4px 6px; border: 1px solid var(--linear-border); border-radius: 4px; background-color: var(--linear-bg); color: var(--linear-text-secondary); font-size: 12px; cursor: pointer; transition: all 0.2s ease; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; } .search-clear-button:hover { background-color: var(--linear-red-light); color: var(--linear-red); border-color: var(--linear-red); } /* Search highlight styles */ .search-match { background-color: rgba(255, 255, 0, 0.3); color: var(--linear-text-primary); padding: 1px 2px; border-radius: 2px; } .search-match-current { background-color: rgba(255, 165, 0, 0.6); color: var(--linear-text-primary); padding: 1px 2px; border-radius: 2px; border: 1px solid orange; } /* Removed duplicate logs-viewer-container class */ /* Responsive adjustments for search controls */ @media (max-width: 768px) { .logs-search-container { flex-direction: column; align-items: stretch; } .logs-search-input { min-width: unset; width: 100%; } .search-controls { justify-content: center; } .search-navigation { margin-left: 0; justify-content: center; } } /* Terminal Viewer Styles */ .terminal-viewer { display: flex; flex-direction: column; height: 100%; width: 100%; } .terminal-error { background-color: var(--linear-red-light); border: 1px solid var(--linear-red); border-radius: 4px; padding: 16px; margin-bottom: 16px; color: var(--linear-red); text-align: center; } .terminal-retry-message { font-size: 12px; color: #aaa; margin-top: 5px; } .terminal-error p { margin: 0 0 8px 0; font-size: 14px; } .terminal-container { flex: 1; min-height: 400px; height: calc(100vh - 320px); width: 100%; border: 1px solid var(--linear-border); border-radius: 4px; background-color: #1e1e1e; overflow: hidden; position: relative; display: block; } /* Override xterm.js styles to match our theme */ .xterm { font-family: Monaco, Menlo, "Ubuntu Mono", monospace !important; font-size: 14px; width: 100% !important; height: 100% !important; } /* Fix terminal text selection visibility */ .terminal-container .xterm .xterm-selection { background-color: #3297FD !important; opacity: 0.4 !important; } .terminal-container .xterm .xterm-selection div { background-color: #3297FD !important; opacity: 0.4 !important; color: inherit !important; } .xterm .xterm-viewport { background-color: #1e1e1e !important; width: 100% !important; height: 100% !important; } .xterm .xterm-screen { background-color: #1e1e1e !important; width: 100% !important; height: 100% !important; position: relative !important; } .xterm .xterm-cursor { background-color: #ffffff !important; } /* Ensure xterm layers are properly stacked */ .xterm .xterm-viewport, .xterm .xterm-screen, .xterm .xterm-decoration-container, .xterm .xterm-cursor-layer, .xterm .xterm-selection-container { position: absolute !important; top: 0 !important; left: 0 !important; } /* Make sure text content is visible */ .xterm .xterm-rows { color: #ffffff !important; } .xterm .xterm-rows .xterm-row { color: #ffffff !important; } .xterm .xterm-rows .xterm-row span { color: #ffffff !important; } /* Ensure the character layer is visible */ .xterm .xterm-char-measure-element { visibility: hidden !important; } .xterm .xterm-decoration-container .xterm-decoration { position: absolute !important; } /* Fix any potential z-index issues */ .xterm .xterm-screen canvas { position: absolute !important; top: 0 !important; left: 0 !important; z-index: 1 !important; } /* Hide the internal textarea that xterm.js uses for input */ .xterm .xterm-helper-textarea { position: absolute !important; left: -9999px !important; top: -9999px !important; opacity: 0 !important; pointer-events: none !important; } .xterm .xterm-helpers { position: absolute } /* Make sure any textareas in terminal container are hidden */ .terminal-container textarea { position: absolute !important; left: -9999px !important; top: -9999px !important; opacity: 0 !important; pointer-events: none !important; } /* Responsive terminal */ @media (max-width: 768px) { .terminal-controls { padding: 8px; margin-bottom: 8px; } .terminal-connection-info { flex-direction: column; align-items: stretch; } .terminal-shell-controls { flex-direction: column; align-items: stretch; } .terminal-shell-controls select, .terminal-connect-btn, .terminal-disconnect-btn, .terminal-retry-btn { width: 100%; } .terminal-container { min-height: 300px; height: calc(100vh - 280px); } } /* Resource Type Visibility Dropdown */ .resource-type-visibility-dropdown { position: relative; margin-right: 8px; width: 250px; } .filter-option { padding: 6px 8px; margin-bottom: 4px; display: flex; align-items: center; } .filter-option label { display: flex; align-items: center; width: 100%; cursor: pointer; } .filter-option input[type="checkbox"] { margin-right: 8px; } .filter-option span { font-size: 13px; } .filter-text-input { width: 100%; /* padding: 6px 8px; border: 1px solid var(--linear-border); */ border-radius: 4px; font-size: 13px; color: var(--linear-text-primary); background-color: var(--linear-bg); } .filter-text-input:focus { outline: none; border-color: var(--linear-blue); box-shadow: 0 0 0 2px rgba(0, 102, 255, 0.1); } /* Pagination controls in tree */ .pagination-controls { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px; gap: 6px; width: 100%; height: 100%; box-sizing: border-box; } .pagination-info { font-size: 12px; color: var(--linear-text-secondary); font-weight: 500; } .pagination-buttons { display: flex; align-items: center; justify-content: center; gap: 8px; } .pagination-btn { background: var(--linear-bg); border: 1px solid var(--linear-border); border-radius: 4px; padding: 4px 8px; cursor: pointer; font-size: 12px; line-height: 1; color: var(--linear-text-primary); transition: all 0.2s ease; } .pagination-btn:hover:not(:disabled) { background: var(--linear-bg-secondary); border-color: var(--linear-blue); } .pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; } .page-indicator { font-size: 11px; color: var(--linear-text-secondary); min-width: 40px; text-align: center; } /* Secret Details styles */ .secret-details { padding: 20px; background: var(--linear-bg); } .secret-header { background: var(--linear-bg-secondary); border-radius: 8px; padding: 20px; margin-bottom: 20px; border: 1px solid var(--linear-border); } .secret-type { display: flex; align-items: center; gap: 10px; } .secret-data-wrapper { background: var(--linear-bg-secondary); border-radius: 8px; border: 1px solid var(--linear-border); overflow: hidden; } .secret-data-table-container { overflow-x: auto; } .secret-data-table { width: 100%; border-collapse: collapse; background: var(--linear-bg-secondary); } .secret-data-table th { background: var(--linear-bg-tertiary); color: var(--linear-text-primary); text-align: left; padding: 12px; border-bottom: 2px solid var(--linear-border); font-weight: 600; } .secret-data-table td { padding: 12px; border-bottom: 1px solid var(--linear-border); vertical-align: top; } .key-cell { min-width: 200px; } .key-name { font-weight: 600; color: var(--linear-text-primary); margin-bottom: 4px; } .key-type { font-size: 12px; color: var(--linear-text-secondary); font-style: italic; } .value-cell { max-width: 400px; position: relative; /* allow absolutely positioned actions */ padding-right: 160px; /* reserve space for action buttons */ } .value-content { max-height: none; /* let inner pre control height */ overflow: visible; /* avoid creating a second scroll area */ } .secret-value { background: var(--linear-bg-primary); border: 1px solid var(--linear-border); border-radius: 4px; padding: 8px; margin: 0; font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; font-size: 12px; color: var(--linear-text-primary); white-space: pre-wrap; word-break: break-all; max-height: 120px; overflow-y: auto; } /* Value field action buttons aligned to the right over the value */ /* Position relative moved to .value-cell so actions are outside scroll area */ /* (no additional properties for .value-content) */ .value-actions { position: absolute; top: 16px; right: 16px; display: flex; gap: 6px; z-index: 2; } /* Shared neutral action button style */ .action-button { background: var(--linear-bg); border: 1px solid var(--linear-border); color: var(--linear-text-primary); cursor: pointer; padding: 4px 8px; border-radius: 4px; font-size: 12px; transition: all 0.2s ease; } .action-button:hover:not(:disabled) { background: var(--linear-bg-secondary); border-color: var(--linear-text-tertiary); } .action-button:disabled { opacity: 0.5; cursor: not-allowed; } /* Copy state color only when copied */ .copy-button.copied { background: var(--linear-green-light); border-color: var(--linear-green); color: var(--linear-green); } /* Copied indicator */ .copy-indicator { align-self: center; font-size: 11px; color: var(--linear-green); background: var(--linear-green-light); border: 1px solid var(--linear-green); border-radius: 10px; padding: 2px 6px; } .no-data { text-align: center; color: var(--linear-text-secondary); font-style: italic; padding: 40px; } /* Update Notice */ .update-notice { position: fixed; bottom: 16px; left: 16px; background: #1f1f1f; color: #e8e8e8; border-radius: 14px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4); padding: 8px 18px; display: flex; align-items: center; gap: 16px; z-index: 2147483647; /* ensure on top */ } .update-notice__actions { display: flex; gap: 8px; margin-left: auto; } .update-notice__btn { height: 30px; padding: 0 12px; border-radius: 8px; border: none; cursor: pointer; font: inherit; } .update-notice__btn--ghost { background: transparent; color: #bdbdbd; } .update-notice__btn--primary { background: #6b8cff; color: #0b0b0b; } /* Split controls and panes */ .split-button { background: var(--linear-bg, transparent); border: 1px solid var(--linear-border, rgba(255,255,255,0.1)); color: var(--linear-text-primary, #fff); border-radius: 4px; padding: 4px 8px; cursor: pointer; } .split-button:hover { background: var(--linear-bg-secondary, rgba(255,255,255,0.06)); } .panes-container { display: flex; width: 100%; height: 100%; flex: 1; /* fill parent wrapper */ min-height: 0; /* allow children to shrink */ min-width: 0; /* allow children to shrink horizontally */ overflow: visible; /* allow dropdowns to show */ } .panes-container.horizontal { flex-direction: column; } .panes-container.vertical { flex-direction: row; } .pane-wrapper { display: flex; flex-direction: column; min-height: 0; min-width: 0; /* flex is set inline via style attribute during resize */ overflow: visible; } .pane { display: flex; flex-direction: column; min-height: 0; /* allow inner content to shrink */ min-width: 0; /* allow inner content to shrink horizontally */ flex: 1; overflow: visible; /* allow dropdowns to show */ container-type: size; /* Enable container queries for responsive behavior */ container-name: pane; } .pane:focus { outline: none; box-shadow: none; } .pane .resource-section.full-width { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; /* allow child to calculate height for scrolling */ min-width: 0; /* allow child to calculate width for scrolling */ overflow: hidden; /* contain scrolling content */ } .pane-divider { background: var(--linear-border, rgba(255,255,255,0.08)); flex: 0 0 auto; transition: background 0.15s ease; user-select: none; } .pane-divider:hover { background: var(--linear-blue, rgba(59, 130, 246, 0.5)); } .pane-divider-horizontal { height: 6px; /* small divider between horizontal panes */ width: 100%; margin-top: 8px; margin-bottom: 8px; cursor: row-resize; } .pane-divider-vertical { width: 6px; /* small divider between vertical panes */ height: auto; margin-left: 8px; margin-right: 8px; cursor: col-resize; } /* Ensure resource list area does not create inner scrollbars inside panes */ /* Make the list area inside a pane fill the pane and scroll vertically */ .pane .resource-list-container { display: flex; flex-direction: column; height: 100%; max-height: none; overflow: hidden; /* let inner wrapper scroll */ } .pane .resource-table-wrapper { flex: 1 1 auto; height: auto; overflow-y: auto; /* scroll only this area */ overflow-x: hidden; /* avoid horizontal scroll */ } /* ===== ValuesFromViewer - Minimal styles reusing existing patterns ===== */ .values-content-grid { display: grid; gap: 1.5rem; margin-top: 1rem; } .merge-flow-diagram { background-color: var(--linear-bg-secondary); border: 1px solid var(--linear-border); border-radius: 8px; padding: 1.5rem; } .flow-step-header { display: flex; flex-direction: column; gap: 0.5rem; } .step-main { flex: 1; min-width: 0; } /* Merge order column styles */ .merge-flow-diagram { } .flow-step { background-color: var(--linear-bg); border: 1px solid var(--linear-border); border-radius: 4px; padding: 8px 12px; margin-bottom: 8px; cursor: pointer; transition: all 0.2s ease; } .flow-step:hover { background-color: var(--linear-bg-secondary); } .flow-step.missing { border-color: var(--linear-yellow); background-color: var(--linear-yellow-light); } .flow-step.error { border-color: var(--linear-red); background-color: var(--linear-red-light); } .flow-step-header { display: flex !important; align-items: flex-start !important; gap: 8px !important; flex-direction: row !important; } .step-number { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; background-color: var(--linear-blue); color: white; border-radius: 50%; font-size: 11px; font-weight: 600; flex-shrink: 0; padding: 0 4px; } .source-name { font-size: 13px; font-weight: 500; color: var(--linear-text-primary); display: flex; align-items: center; gap: 6px; margin-bottom: 2px; } .source-kind { font-size: 10px; font-weight: 600; text-transform: uppercase; color: var(--linear-blue); background-color: var(--linear-blue-light); padding: 2px 4px; border-radius: 3px; } .source-resource-name { font-weight: 500; color: var(--linear-text-primary); } .source-key { font-size: 11px; color: var(--linear-text-secondary); } .source-status { flex-shrink: 0; margin-left: auto; } .source-status .status-badge { font-size: 11px; padding: 2px 6px; border-radius: 10px; font-weight: 500; } .source-status .status-badge.success { background-color: var(--linear-green-light); color: var(--linear-green); } .source-status .status-badge.warning { background-color: var(--linear-yellow-light); color: var(--linear-yellow); } .source-status .status-badge.error { background-color: var(--linear-red-light); color: var(--linear-red); } .source-target-path { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--linear-border); font-size: 11px; display: flex; align-items: center; gap: 4px; } .target-label { font-weight: 600; color: var(--linear-text-secondary); } .target-path { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; background-color: var(--linear-bg-secondary); padding: 2px 4px; border-radius: 3px; } .overwrites-badge { margin-left: auto; background-color: var(--linear-yellow); color: white; padding: 2px 6px; border-radius: 10px; font-size: 10px; font-weight: 600; } .source-error { margin-top: 6px; padding: 6px; background-color: var(--linear-red-light); border-left: 2px solid var(--linear-red); border-radius: 3px; font-size: 11px; color: var(--linear-red); } .flow-arrow { text-align: center; color: var(--linear-text-tertiary); margin: 4px 0; font-size: 16px; } .flow-start, .flow-result { text-align: center; padding: 6px 12px; border-radius: 4px; font-size: 12px; font-weight: 500; margin-bottom: 8px; } .flow-start { background-color: var(--linear-bg); border: 1px solid var(--linear-border); color: var(--linear-text-secondary); } .flow-result { background-color: var(--linear-green-light); color: var(--linear-green); font-weight: 600; } .merged-values-section { background-color: var(--linear-bg); border: 1px solid var(--linear-border); border-radius: 8px; padding: 16px; } .merged-values-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--linear-border); } .merged-values-header h3 { font-size: 14px; font-weight: 600; margin: 0; } .values-actions { display: flex; align-items: center; gap: 8px; } .values-actions .checkbox-label { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--linear-text-secondary); cursor: pointer; user-select: none; } .values-from-viewer .merge-note { font-size: 12px; color: var(--linear-text-secondary); margin-bottom: 12px; font-style: italic; } .source-detail-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; } .modal-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); } .modal-content { position: relative; background-color: var(--linear-bg); border: 1px solid var(--linear-border); border-radius: 8px; box-shadow: var(--linear-shadow-hover); max-width: 800px; max-height: 90vh; width: 100%; overflow: hidden; display: flex; flex-direction: column; } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 16px; border-bottom: 1px solid var(--linear-border); } .modal-header h2 { font-size: 16px; font-weight: 600; margin: 0; } .close-btn { background: none; border: none; font-size: 20px; color: var(--linear-text-secondary); cursor: pointer; padding: 4px; line-height: 1; transition: color 0.2s ease; } .close-btn:hover { color: var(--linear-text-primary); } .modal-body { padding: 16px; overflow-y: auto; flex: 1; } .source-detail-modal .detail-row { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--linear-border); } .source-detail-modal .detail-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .source-detail-modal .detail-label { font-size: 13px; font-weight: 600; color: var(--linear-text-secondary); margin-bottom: 4px; } .source-detail-modal .detail-row code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; } .source-detail-modal .source-data h3 { font-size: 14px; font-weight: 600; margin-bottom: 8px; } .values-from-viewer .loading { padding: 32px; text-align: center; color: var(--linear-text-secondary); }