/* IBM Carbon Design System - Persona Graph System */ /* Carbon Color Tokens */ :root { /* UI Colors */ --cds-ui-background: #ffffff; --cds-ui-01: #f4f4f4; --cds-ui-02: #ffffff; --cds-ui-03: #e0e0e0; --cds-ui-04: #8d8d8d; --cds-ui-05: #161616; /* Text Colors */ --cds-text-primary: #161616; --cds-text-secondary: #525252; --cds-text-placeholder: #a8a8a8; --cds-text-on-color: #ffffff; --cds-text-helper: #6f6f6f; --cds-text-error: #da1e28; /* Link Colors */ --cds-link-primary: #0f62fe; --cds-link-primary-hover: #0043ce; /* Interactive Colors */ --cds-interactive: #0f62fe; --cds-hover-primary: #0353e9; --cds-active-primary: #002d9c; --cds-hover-ui: #e5e5e5; --cds-active-ui: #c6c6c6; --cds-selected-ui: #e0e0e0; --cds-focus: #0f62fe; /* Support Colors */ --cds-support-error: #da1e28; --cds-support-success: #24a148; --cds-support-warning: #f1c21b; --cds-support-info: #0043ce; --cds-support-02: #24a148; /* Interactive Colors (Extended) */ --cds-interactive-04: #0f62fe; /* Layer Colors */ --cds-layer-01: #f4f4f4; --cds-layer-02: #ffffff; --cds-layer-03: #e0e0e0; --cds-layer-accent-01: #e0e0e0; /* Field Colors */ --cds-field-01: #f4f4f4; --cds-field-02: #ffffff; /* Border Colors */ --cds-border-subtle: #e0e0e0; --cds-border-strong: #8d8d8d; --cds-border-interactive: #0f62fe; /* Spacing Scale (rem) */ --cds-spacing-01: 0.125rem; --cds-spacing-02: 0.25rem; --cds-spacing-03: 0.5rem; --cds-spacing-04: 0.75rem; --cds-spacing-05: 1rem; --cds-spacing-06: 1.5rem; --cds-spacing-07: 2rem; --cds-spacing-08: 2.5rem; --cds-spacing-09: 3rem; --cds-spacing-10: 4rem; /* Typography */ --cds-font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; --cds-font-family-mono: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', monospace; } /* Carbon g100 Dark Theme — applied via [data-theme="dark"] on */ [data-theme="dark"] { --cds-background: #161616; --cds-ui-background: #161616; --cds-ui-01: #262626; --cds-ui-02: #393939; --cds-ui-03: #525252; --cds-ui-04: #6f6f6f; --cds-ui-05: #f4f4f4; --cds-text-primary: #f4f4f4; --cds-text-secondary: #c6c6c6; --cds-text-placeholder: #6f6f6f; --cds-text-on-color: #ffffff; --cds-text-helper: #8d8d8d; --cds-text-error: #ff8389; --cds-link-primary: #78a9ff; --cds-link-primary-hover: #a6c8ff; --cds-interactive: #4589ff; --cds-hover-primary: #4589ff; --cds-active-primary: #002d9c; --cds-hover-ui: #353535; --cds-active-ui: #525252; --cds-selected-ui: #393939; --cds-focus: #ffffff; --cds-support-error: #ff8389; --cds-support-success: #42be65; --cds-support-warning: #f1c21b; --cds-support-info: #78a9ff; --cds-support-02: #42be65; --cds-interactive-04: #4589ff; --cds-layer-01: #262626; --cds-layer-02: #393939; --cds-layer-03: #525252; --cds-layer-accent-01: #393939; --cds-field-01: #262626; --cds-field-02: #393939; --cds-border-subtle: #393939; --cds-border-strong: #6f6f6f; --cds-border-interactive: #4589ff; } /* Reset and Base */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--cds-font-family); font-size: 0.875rem; line-height: 1.29; color: var(--cds-text-primary); background-color: var(--cds-ui-background); letter-spacing: 0.16px; } /* Global Toolbar */ .cds-header { position: fixed; top: 0; left: 0; right: 0; height: 48px; background-color: #161616; color: #f4f4f4; display: flex; align-items: center; padding: 0 var(--cds-spacing-05); z-index: 8000; border-bottom: 1px solid #393939; } .cds-header__name { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.1px; margin-right: var(--cds-spacing-07); white-space: nowrap; } .cds-header__nav { display: flex; align-items: center; gap: var(--cds-spacing-02); flex: 1; } .cds-header__menu-item { color: #f4f4f4; text-decoration: none; padding: var(--cds-spacing-03) var(--cds-spacing-05); font-size: 0.875rem; letter-spacing: 0.16px; border-bottom: 3px solid transparent; transition: all 70ms cubic-bezier(0, 0, 0.38, 0.9); height: 48px; display: flex; align-items: center; } .cds-header__menu-item:hover { background-color: #353535; } .cds-header__menu-item.active { border-bottom-color: var(--cds-interactive); } .cds-header__action { background: none; border: none; color: #f4f4f4; padding: var(--cds-spacing-03) var(--cds-spacing-05); cursor: pointer; font-size: 0.875rem; height: 48px; display: flex; align-items: center; gap: var(--cds-spacing-03); transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9); } .cds-header__action:hover { background-color: #353535; } /* Main Content Area */ .cds-content { margin-top: 48px; padding: var(--cds-spacing-07); min-height: calc(100vh - 48px); } .cds-content.fullscreen { max-width: 100%; padding: var(--cds-spacing-05); } .cds-content.narrow { max-width: 1584px; margin-left: auto; margin-right: auto; } /* Typography */ h1, .cds-heading-01 { font-size: 2rem; font-weight: 300; line-height: 1.25; letter-spacing: 0; margin-bottom: var(--cds-spacing-06); } h2, .cds-heading-02 { font-size: 1.75rem; font-weight: 300; line-height: 1.29; letter-spacing: 0; margin-bottom: var(--cds-spacing-05); } h3, .cds-heading-03 { font-size: 1.25rem; font-weight: 400; line-height: 1.4; letter-spacing: 0; margin-bottom: var(--cds-spacing-05); } .cds-body-short { font-size: 0.875rem; line-height: 1.29; letter-spacing: 0.16px; } .cds-label { font-size: 0.75rem; font-weight: 400; line-height: 1.34; letter-spacing: 0.32px; color: var(--cds-text-secondary); } /* Buttons */ .cds-btn { display: inline-flex; align-items: center; justify-content: center; padding: calc(0.875rem - 3px) 15px calc(0.875rem - 3px) 15px; border: none; font-size: 0.875rem; font-weight: 400; line-height: 1.29; letter-spacing: 0.16px; cursor: pointer; transition: background 70ms cubic-bezier(0, 0, 0.38, 0.9); min-height: 48px; } .cds-btn--primary { background-color: var(--cds-interactive); color: var(--cds-text-on-color); } .cds-btn--primary:hover { background-color: var(--cds-hover-primary); } .cds-btn--secondary { background-color: transparent; color: var(--cds-text-primary); border: 1px solid var(--cds-interactive); } .cds-btn--secondary:hover { background-color: var(--cds-hover-ui); } .cds-btn--ghost { background-color: transparent; color: var(--cds-link-primary); padding: calc(0.875rem - 3px) var(--cds-spacing-05); } .cds-btn--ghost:hover { background-color: var(--cds-hover-ui); } .cds-btn--danger { background-color: var(--cds-support-error); color: var(--cds-text-on-color); } .cds-btn--danger:hover { background-color: #ba1b23; } /* Form Elements */ .cds-form-item { margin-bottom: var(--cds-spacing-06); } .cds-label { display: block; margin-bottom: var(--cds-spacing-03); font-size: 0.75rem; font-weight: 400; line-height: 1.34; letter-spacing: 0.32px; color: var(--cds-text-secondary); } .cds-text-input, .cds-text-area, .cds-select { width: 100%; padding: 0 var(--cds-spacing-05); background-color: var(--cds-field-01); border: none; border-bottom: 1px solid var(--cds-ui-04); color: var(--cds-text-primary); font-size: 0.875rem; line-height: 1.29; letter-spacing: 0.16px; outline: 2px solid transparent; outline-offset: -2px; transition: all 70ms cubic-bezier(0, 0, 0.38, 0.9); min-height: 40px; } .cds-text-area { padding: var(--cds-spacing-04) var(--cds-spacing-05); resize: vertical; min-height: 80px; } .cds-text-input:focus, .cds-text-area:focus, .cds-select:focus { outline: 2px solid var(--cds-focus); outline-offset: -2px; } /* Tiles/Cards */ .cds-tile { background-color: var(--cds-layer-01); padding: var(--cds-spacing-05); margin-bottom: var(--cds-spacing-05); min-height: 4rem; } .cds-clickable-tile { background-color: var(--cds-layer-01); padding: var(--cds-spacing-05); margin-bottom: var(--cds-spacing-05); cursor: pointer; transition: all 70ms cubic-bezier(0, 0, 0.38, 0.9); border: 1px solid transparent; } .cds-clickable-tile:hover { background-color: var(--cds-hover-ui); } /* Data Table */ .cds-data-table { width: 100%; border-collapse: collapse; border-spacing: 0; } .cds-data-table thead { background-color: var(--cds-layer-01); } .cds-data-table th { padding: var(--cds-spacing-05); text-align: left; font-size: 0.875rem; font-weight: 600; line-height: 1.29; letter-spacing: 0.16px; color: var(--cds-text-primary); border-bottom: 1px solid var(--cds-border-subtle); } .cds-data-table td { padding: var(--cds-spacing-05); font-size: 0.875rem; line-height: 1.29; letter-spacing: 0.16px; color: var(--cds-text-primary); border-bottom: 1px solid var(--cds-border-subtle); } .cds-data-table tbody tr:hover { background-color: var(--cds-hover-ui); } /* Scrollable list and form panels — used on personas, teams, nodes, relationships pages */ .cds-list-panel, .cds-form-panel { height: calc(100vh - 220px); overflow-y: auto; } /* Tabs */ .cds-tabs { display: flex; border-bottom: 1px solid var(--cds-border-subtle); margin-bottom: var(--cds-spacing-06); } .cds-tab { background: none; border: none; padding: var(--cds-spacing-05) var(--cds-spacing-06); font-size: 0.875rem; line-height: 1.29; letter-spacing: 0.16px; color: var(--cds-text-secondary); cursor: pointer; border-bottom: 2px solid transparent; transition: all 70ms cubic-bezier(0, 0, 0.38, 0.9); } .cds-tab:hover { color: var(--cds-text-primary); border-bottom-color: var(--cds-border-strong); } .cds-tab.active { color: var(--cds-text-primary); border-bottom-color: var(--cds-interactive); } /* Notifications */ .cds-inline-notification { display: flex; align-items: flex-start; padding: var(--cds-spacing-05); margin-bottom: var(--cds-spacing-05); min-height: 48px; } .cds-inline-notification--error { background-color: #fff1f1; border-left: 3px solid var(--cds-support-error); } .cds-inline-notification--success { background-color: #defbe6; border-left: 3px solid var(--cds-support-success); } .cds-inline-notification--warning { background-color: #fcf4d6; border-left: 3px solid var(--cds-support-warning); } .cds-inline-notification--info { background-color: #edf5ff; border-left: 3px solid var(--cds-support-info); } [data-theme="dark"] .cds-inline-notification--error { background-color: #2a0a0a; } [data-theme="dark"] .cds-inline-notification--success { background-color: #071a0a; } [data-theme="dark"] .cds-inline-notification--warning { background-color: #261c00; } [data-theme="dark"] .cds-inline-notification--info { background-color: #040f26; } /* Loading */ .cds-loading { display: inline-block; width: 48px; height: 48px; border: 3px solid var(--cds-ui-03); border-top-color: var(--cds-interactive); border-radius: 50%; animation: cds-loading-spin 1s linear infinite; } @keyframes cds-loading-spin { to { transform: rotate(360deg); } } /* Grid System */ .cds-grid { display: grid; gap: var(--cds-spacing-05); } .cds-grid--2-col { grid-template-columns: repeat(2, 1fr); } .cds-grid--3-col { grid-template-columns: repeat(3, 1fr); } .cds-grid--4-col { grid-template-columns: repeat(4, 1fr); } @media (max-width: 672px) { .cds-grid--2-col, .cds-grid--3-col, .cds-grid--4-col { grid-template-columns: 1fr; } } /* Utility Classes */ .cds-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Made with Bob - IBM Carbon Design System */ /* Made with Bob */ /* Persona Name Link Styling */ .persona-name-link { color: var(--cds-link-primary); text-decoration: none; transition: color 0.11s cubic-bezier(0.2, 0, 0.38, 0.9); } .persona-name-link:hover { color: var(--cds-link-primary-hover); text-decoration: underline; } .persona-name-link:focus { outline: 2px solid var(--cds-focus); outline-offset: 2px; } /* Search Input with Clear Button - Firefox style */ .search-input-wrapper { display: inline-flex !important; align-items: center !important; gap: 4px !important; width: 100% !important; position: relative !important; } .search-input-wrapper input { flex: 1 !important; min-width: 0 !important; } .search-clear-btn { background: transparent !important; border: none !important; color: #000000 !important; font-size: 16px !important; font-weight: normal !important; cursor: pointer !important; padding: 0 !important; width: 24px !important; height: 24px !important; min-width: 24px !important; max-width: 24px !important; border-radius: 4px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; opacity: 0 !important; pointer-events: none !important; transition: background 0.15s ease, opacity 0.15s ease !important; line-height: 1 !important; flex-shrink: 0 !important; vertical-align: middle !important; position: relative !important; z-index: 100 !important; } .search-clear-btn.visible { opacity: 1 !important; pointer-events: auto !important; } .search-clear-btn:hover { background: #d0d0d0 !important; } /* Ensure wrapper doesn't break form layouts */ .cds-form-item .search-input-wrapper { display: inline-flex !important; }