diff --git a/src/account/theme.css b/src/account/theme.css index a5a7d47..55fc275 100644 --- a/src/account/theme.css +++ b/src/account/theme.css @@ -1,1110 +1,19 @@ -:root { - --nexus-account-void: #07101e; - --nexus-account-chrome: #0b1728; - --nexus-account-panel: #ffffff; - --nexus-account-canvas: #f2f5f8; - --nexus-account-canvas-strong: #e8edf2; - --nexus-account-signal: #00a3b4; - --nexus-account-signal-bright: #58d7e3; - --nexus-account-indigo: #5d63d8; - --nexus-account-mint: #8de3cf; - --nexus-account-text: #142033; - --nexus-account-muted: #607087; - --nexus-account-line: #d8e0e8; - --nexus-account-line-strong: #becad6; - --nexus-account-danger: #c33d4d; - --nexus-account-radius-sm: 5px; - --nexus-account-radius-md: 9px; - --nexus-account-shadow: 0 1px 2px rgba(20, 32, 51, 0.04), - 0 12px 34px rgba(20, 32, 51, 0.07); - --pf-v5-global--primary-color--100: #007f8e; - --pf-v5-global--primary-color--200: #006773; - --pf-v5-global--link--Color: #007985; - --pf-v5-global--link--Color--hover: #005963; - --pf-v5-global--BackgroundColor--100: var(--nexus-account-panel); - --pf-v5-global--BackgroundColor--150: #f8fafb; - --pf-v5-global--BackgroundColor--200: var(--nexus-account-canvas); - --pf-v5-global--Color--100: var(--nexus-account-text); - --pf-v5-global--Color--200: var(--nexus-account-muted); - --pf-v5-global--BorderColor--100: var(--nexus-account-line); - --pf-v5-global--BorderColor--200: var(--nexus-account-line-strong); - color-scheme: light; -} - -.pf-v5-theme-dark { - --nexus-account-panel: #111d2e; - --nexus-account-canvas: #08111f; - --nexus-account-canvas-strong: #0d192a; - --nexus-account-text: #edf4fb; - --nexus-account-muted: #a6b5c8; - --nexus-account-line: #2a3a50; - --nexus-account-line-strong: #40516a; - --nexus-account-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 16px 40px rgba(0, 0, 0, 0.28); - --pf-v5-global--primary-color--100: #58d7e3; - --pf-v5-global--primary-color--200: #8de7ee; - --pf-v5-global--link--Color: #68dbe5; - --pf-v5-global--link--Color--hover: #a0edf2; - --pf-v5-global--BackgroundColor--100: var(--nexus-account-panel); - --pf-v5-global--BackgroundColor--150: #162338; - --pf-v5-global--BackgroundColor--200: var(--nexus-account-canvas); - --pf-v5-global--Color--100: var(--nexus-account-text); - --pf-v5-global--Color--200: var(--nexus-account-muted); - --pf-v5-global--BorderColor--100: var(--nexus-account-line); - --pf-v5-global--BorderColor--200: var(--nexus-account-line-strong); - color-scheme: dark; -} +/* + * Account compatibility layer. + * Shared colors and PatternFly primitives live in ../console-ui.css, while + * account business composition lives in workspace.css. + */ html, body, #root { - min-height: 100%; + height: 100%; } body { margin: 0; - color: var(--nexus-account-text); - background: var(--nexus-account-canvas); - font-family: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif; - font-size: 15px; - -webkit-font-smoothing: antialiased; } -.pf-v5-c-page, -.pf-v5-c-page__main, -.pf-v5-c-page__main-section, -.pf-v5-c-page__main-section.pf-m-light { - background-color: var(--nexus-account-canvas); -} - -.pf-v5-c-page__main { - position: relative; +#root { isolation: isolate; - background-image: radial-gradient( - circle at 94% 9%, - color-mix(in srgb, var(--nexus-account-signal) 9%, transparent) 0, - transparent 23rem - ), - linear-gradient(rgba(41, 73, 104, 0.025) 1px, transparent 1px), - linear-gradient(90deg, rgba(41, 73, 104, 0.025) 1px, transparent 1px); - background-size: - auto, - 48px 48px, - 48px 48px; -} - -.pf-v5-c-masthead { - min-height: 72px; - border-bottom: 1px solid rgba(88, 215, 227, 0.2); - background: linear-gradient(90deg, rgba(88, 215, 227, 0.06), transparent 32%), - var(--nexus-account-void); - box-shadow: 0 10px 30px rgba(3, 9, 20, 0.22); -} - -.pf-v5-c-masthead::after { - position: absolute; - right: 0; - bottom: -1px; - width: min(36vw, 34rem); - height: 1px; - background: linear-gradient(90deg, transparent, var(--nexus-account-signal-bright)); - content: ""; - opacity: 0.65; -} - -img.keycloak__pageheader_brand { - width: 192px; - height: 42px; - object-fit: contain; - object-position: left center; -} - -.pf-v5-c-masthead .pf-v5-c-button.pf-m-link, -.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain { - color: #b9c8da; -} - -.pf-v5-c-masthead .pf-v5-c-button:hover { - color: #ffffff; -} - -.pf-v5-c-page__sidebar, -.pf-v5-c-page__sidebar-body { - color: #dce8f5; - background: radial-gradient( - circle at 28% 92%, - rgba(88, 215, 227, 0.1), - transparent 15rem - ), - linear-gradient(165deg, rgba(93, 99, 216, 0.08), transparent 38%), - var(--nexus-account-chrome); -} - -.pf-v5-c-page__sidebar { - width: 272px; - border-right: 1px solid rgba(88, 215, 227, 0.14); - box-shadow: 12px 0 32px rgba(5, 13, 25, 0.08); -} - -.pf-v5-c-page__sidebar-body { - position: relative; - padding: 1.35rem 0.9rem 2rem; -} - -/* The signal rail is the visual signature of the identity console. */ -.pf-v5-c-page__sidebar-body::before { - display: none; -} - -.nexus-nav-context { - display: grid; - gap: 0.28rem; - margin: 0.2rem 0.65rem 1.35rem; - padding: 0.25rem 0.35rem 1.15rem; - border-bottom: 1px solid rgba(159, 176, 198, 0.14); -} - -.nexus-nav-context__eyebrow { - color: var(--nexus-account-signal-bright); - font-family: "Cascadia Code", Consolas, monospace; - font-size: 0.63rem; - letter-spacing: 0.15em; - text-transform: uppercase; -} - -.nexus-nav-context strong { - color: #f3f8fe; - font-family: "Bahnschrift SemiCondensed", "Arial Narrow", sans-serif; - font-size: 1.15rem; - font-weight: 560; - letter-spacing: 0.01em; -} - -.nexus-nav-context__rule { - display: block; - width: 4.5rem; - height: 5px; - margin-top: 0.45rem; - background: radial-gradient( - circle, - var(--nexus-account-signal-bright) 0 1.7px, - transparent 2px - ) - left center / 11px 5px repeat-x; - opacity: 0.72; - mask-image: linear-gradient(90deg, #000 55%, transparent); -} - -.pf-v5-c-nav__list { - display: grid; - gap: 0.22rem; -} - -.pf-v5-c-nav__link, -.pf-v5-c-nav__section-title, -.pf-v5-c-nav__link.pf-m-expandable { - color: #9fb0c6; -} - -.pf-v5-c-nav__link { - position: relative; - min-height: 44px; - padding: 0.72rem 0.9rem 0.72rem 1rem; - border-radius: var(--nexus-account-radius-sm); - font-size: 0.9rem; - font-weight: 560; - letter-spacing: 0.008em; - transition: - color 150ms ease, - background-color 150ms ease, - transform 150ms ease; -} - -.nexus-nav-label { - display: inline-grid; - grid-template-columns: 1.25rem minmax(0, 1fr); - align-items: center; - gap: 0.7rem; - width: 100%; -} - -.nexus-nav-label__icon { - display: inline-grid; - width: 1.25rem; - height: 1.25rem; - place-items: center; - color: #71859e; - transition: - color 150ms ease, - transform 150ms ease; -} - -.nexus-nav-label__icon svg { - width: 0.95rem; - height: 0.95rem; -} - -.pf-v5-c-nav__link:hover .nexus-nav-label__icon, -.pf-v5-c-nav__link:focus .nexus-nav-label__icon, -.pf-v5-c-nav__link.pf-m-current .nexus-nav-label__icon { - color: var(--nexus-account-signal-bright); - transform: scale(1.06); -} - -.pf-v5-c-nav__link:hover, -.pf-v5-c-nav__link:focus { - color: #ffffff; - background: rgba(88, 215, 227, 0.07); - transform: translateX(2px); -} - -.pf-v5-c-nav__link.pf-m-current, -.pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link { - color: #ffffff; - background: linear-gradient(90deg, rgba(88, 215, 227, 0.16), rgba(93, 99, 216, 0.08)); - box-shadow: - inset 3px 0 var(--nexus-account-signal-bright), - 0 6px 18px rgba(0, 0, 0, 0.12); -} - -.pf-v5-c-nav__link.pf-m-current::after { - top: 50%; - right: 0.85rem; - width: 5px; - height: 5px; - border: 0; - border-radius: 50%; - background: var(--nexus-account-mint); - box-shadow: 0 0 0 4px rgba(141, 227, 207, 0.1); - transform: translateY(-50%); -} - -.pf-v5-c-nav__subnav { - margin: 0.15rem 0 0.4rem 1rem; - border-left: 1px solid rgba(88, 215, 227, 0.16); -} - -.pf-v5-c-page__main-section { - padding-inline: clamp(1.25rem, 3.2vw, 3.75rem); -} - -.pf-v5-c-page__main-section > * { - width: 100%; - max-width: 1320px; - margin-inline: auto; -} - -.pf-v5-c-page__main-section:first-child { - position: relative; - padding-top: clamp(2rem, 4vw, 3.25rem); - padding-bottom: clamp(1.65rem, 3vw, 2.5rem); - border-bottom: 1px solid - color-mix(in srgb, var(--nexus-account-line) 82%, transparent); - background: color-mix(in srgb, var(--nexus-account-panel) 78%, transparent); - backdrop-filter: blur(16px); -} - -.nexus-page-intro { - display: flex; - align-items: flex-end; - justify-content: space-between; - gap: 2rem; -} - -.nexus-page-intro__copy { - min-width: 0; -} - -.nexus-page-intro__kicker { - display: block; - margin-bottom: 0.85rem; - color: var(--nexus-account-signal); - font-family: "Cascadia Code", Consolas, monospace; - font-size: 0.66rem; - font-weight: 600; - letter-spacing: 0.13em; - text-transform: uppercase; -} - -.nexus-page-intro__mark { - display: grid; - grid-template-columns: auto 4.5rem auto; - align-items: center; - gap: 0.75rem; - padding-bottom: 0.35rem; - color: var(--nexus-account-muted); - font-family: "Cascadia Code", Consolas, monospace; - font-size: 0.62rem; - letter-spacing: 0.12em; -} - -.nexus-page-intro__mark > span:first-child { - color: var(--nexus-account-text); - font-family: "Bahnschrift SemiCondensed", "Arial Narrow", sans-serif; - font-size: 1.35rem; - font-weight: 620; - letter-spacing: 0.03em; -} - -.nexus-page-intro__mark i { - height: 1px; - background: linear-gradient( - 90deg, - var(--nexus-account-signal), - var(--nexus-account-indigo) - ); -} - -.pf-v5-c-page__main-section:first-child::after { - position: absolute; - right: clamp(1.25rem, 4vw, 4rem); - bottom: 0; - width: 7.5rem; - height: 3px; - background: linear-gradient( - 90deg, - var(--nexus-account-signal), - var(--nexus-account-indigo) - ); - content: ""; -} - -.pf-v5-c-page__main-section + .pf-v5-c-page__main-section { - padding-top: clamp(1.5rem, 3vw, 2.5rem); - padding-bottom: 4.5rem; - background: transparent; -} - -.pf-v5-c-title, -.pf-v5-c-content h1, -.pf-v5-c-content h2, -.pf-v5-c-page__main-title { - color: var(--nexus-account-text); - font-family: "Bahnschrift SemiCondensed", "Arial Narrow", sans-serif; - letter-spacing: -0.025em; -} - -.pf-v5-c-title.pf-m-2xl { - font-size: clamp(2rem, 3.2vw, 3rem); - line-height: 1.02; -} - -.pf-v5-c-title.pf-m-2xl::before { - display: inline-block; - width: 0.5rem; - height: 0.5rem; - margin: 0 0.75rem 0.22rem 0; - border: 2px solid var(--nexus-account-signal); - background: transparent; - content: ""; - transform: rotate(45deg); -} - -.pf-v5-c-text-content > p, -.pf-v5-c-content > p { - max-width: 72ch; - color: var(--nexus-account-muted); - line-height: 1.7; -} - -.pf-v5-c-card, -.pf-v5-c-data-list, -.pf-v5-c-modal-box, -.pf-v5-c-drawer__panel, -.pf-v5-c-popover__content, -.pf-v5-c-menu { - border: 1px solid var(--nexus-account-line); - border-radius: var(--nexus-account-radius-md); - background: var(--nexus-account-panel); - box-shadow: var(--nexus-account-shadow); -} - -.pf-v5-c-card { - overflow: hidden; -} - -.pf-v5-c-card__title, -.pf-v5-c-data-list__item:first-child { - border-bottom-color: var(--nexus-account-line); -} - -.pf-v5-c-data-list__item { - border-bottom-color: var(--nexus-account-line); - transition: background-color 140ms ease; -} - -.pf-v5-c-data-list__item:not(:first-child):hover { - background: color-mix( - in srgb, - var(--nexus-account-signal) 5%, - var(--nexus-account-panel) - ); -} - -.pf-v5-c-data-list__item:first-child { - color: var(--nexus-account-muted); - background: color-mix( - in srgb, - var(--nexus-account-canvas) 62%, - var(--nexus-account-panel) - ); - font-family: "Cascadia Code", Consolas, monospace; - font-size: 0.74rem; - letter-spacing: 0.035em; - text-transform: uppercase; -} - -.pf-v5-c-description-list__term { - color: var(--nexus-account-muted); - font-size: 0.78rem; - letter-spacing: 0.035em; - text-transform: uppercase; -} - -.pf-v5-c-form { - max-width: 1040px; -} - -.pf-v5-c-form__group { - padding-block: 0.35rem; -} - -.pf-v5-c-form__label-text { - color: var(--nexus-account-text); - font-weight: 620; -} - -.pf-v5-c-form__helper-text { - color: var(--nexus-account-muted); - line-height: 1.5; -} - -.pf-v5-c-form-control, -.pf-v5-c-select__toggle, -.pf-v5-c-menu-toggle, -.pf-v5-c-number-input { - min-height: 42px; - border-color: var(--nexus-account-line-strong); - border-radius: var(--nexus-account-radius-sm); - color: var(--nexus-account-text); - background: var(--nexus-account-panel); - box-shadow: inset 0 1px 1px rgba(20, 32, 51, 0.025); - transition: - border-color 140ms ease, - box-shadow 140ms ease; -} - -.pf-v5-c-form-control:hover, -.pf-v5-c-menu-toggle:hover { - border-color: color-mix( - in srgb, - var(--nexus-account-signal) 58%, - var(--nexus-account-line) - ); -} - -.pf-v5-c-form-control:focus-within, -.pf-v5-c-menu-toggle:focus, -.pf-v5-c-menu-toggle.pf-m-expanded { - border-color: var(--nexus-account-signal); - box-shadow: 0 0 0 3px color-mix(in srgb, var(--nexus-account-signal) 15%, transparent); -} - -.pf-v5-c-button { - min-height: 38px; - border-radius: var(--nexus-account-radius-sm); - font-weight: 650; - letter-spacing: 0.005em; - transition: - transform 140ms ease, - box-shadow 140ms ease, - filter 140ms ease; -} - -.pf-v5-c-button.pf-m-primary { - color: #ffffff; - background: var(--pf-v5-global--primary-color--100); - box-shadow: 0 7px 18px color-mix(in srgb, var(--nexus-account-signal) 22%, transparent); -} - -.pf-v5-c-button.pf-m-primary:hover { - background: var(--pf-v5-global--primary-color--200); - box-shadow: 0 9px 22px color-mix(in srgb, var(--nexus-account-signal) 28%, transparent); - transform: translateY(-1px); -} - -.pf-v5-c-button.pf-m-secondary { - border-color: var(--nexus-account-line-strong); - color: var(--nexus-account-text); - background: var(--nexus-account-panel); -} - -.pf-v5-c-button.pf-m-danger { - background: var(--nexus-account-danger); -} - -.pf-v5-c-tabs { - border-bottom: 1px solid var(--nexus-account-line); -} - -.pf-v5-c-tabs__link { - color: var(--nexus-account-muted); - font-weight: 620; -} - -.pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link { - color: var(--nexus-account-text); -} - -.pf-v5-c-tabs__link::after { - height: 3px; - border-color: var(--nexus-account-signal); -} - -.pf-v5-c-label { - border-radius: 999px; - font-weight: 620; -} - -.pf-v5-c-alert { - border: 1px solid var(--nexus-account-line); - border-radius: var(--nexus-account-radius-md); - box-shadow: 0 8px 24px rgba(20, 32, 51, 0.06); -} - -.pf-v5-c-empty-state { - border: 1px dashed var(--nexus-account-line-strong); - border-radius: var(--nexus-account-radius-md); - background: color-mix(in srgb, var(--nexus-account-panel) 70%, transparent); -} - -.nexus-profile-layout { - display: grid; - grid-template-columns: minmax(240px, 0.68fr) minmax(0, 1.65fr); - align-items: start; - gap: clamp(1.25rem, 2.5vw, 2.25rem); -} - -.nexus-identity-card { - position: sticky; - top: 1.5rem; - overflow: hidden; - min-height: 33rem; - padding: 1.4rem; - border: 1px solid rgba(88, 215, 227, 0.18); - border-radius: var(--nexus-account-radius-md); - color: #dfeaf5; - background: radial-gradient( - circle at 112% -8%, - rgba(88, 215, 227, 0.2), - transparent 15rem - ), - linear-gradient(155deg, rgba(93, 99, 216, 0.14), transparent 45%), - var(--nexus-account-chrome); - box-shadow: 0 24px 55px rgba(7, 16, 30, 0.18); -} - -.nexus-identity-card::after { - position: absolute; - right: -4rem; - bottom: -5rem; - width: 15rem; - height: 15rem; - border: 1px solid rgba(88, 215, 227, 0.1); - border-radius: 50%; - box-shadow: - 0 0 0 2.8rem rgba(93, 99, 216, 0.025), - 0 0 0 5.6rem rgba(88, 215, 227, 0.018); - content: ""; - pointer-events: none; -} - -.nexus-identity-card__topline { - display: flex; - align-items: center; - justify-content: space-between; - color: #91a5bc; - font-family: "Cascadia Code", Consolas, monospace; - font-size: 0.62rem; - letter-spacing: 0.13em; - text-transform: uppercase; -} - -.nexus-identity-card__topline i { - width: 7px; - height: 7px; - border: 1px solid var(--nexus-account-signal-bright); - transform: rotate(45deg); -} - -.nexus-identity-card__avatar { - display: grid; - width: 5.4rem; - height: 5.4rem; - margin: 2rem 0 1.5rem; - border: 1px solid rgba(88, 215, 227, 0.42); - background: linear-gradient( - 145deg, - rgba(88, 215, 227, 0.14), - rgba(93, 99, 216, 0.16) - ); - box-shadow: - inset 0 0 0 0.45rem var(--nexus-account-chrome), - 0 0 0 1px rgba(93, 99, 216, 0.3); - place-items: center; - transform: rotate(45deg); -} - -.nexus-identity-card__avatar span { - color: #ffffff; - font-family: "Bahnschrift SemiCondensed", "Arial Narrow", sans-serif; - font-size: 1.5rem; - font-weight: 620; - letter-spacing: 0.06em; - transform: rotate(-45deg); -} - -.nexus-identity-card__name > span { - color: var(--nexus-account-signal-bright); - font-family: "Cascadia Code", Consolas, monospace; - font-size: 0.64rem; - letter-spacing: 0.12em; - text-transform: uppercase; -} - -.nexus-identity-card__name h2 { - margin: 0.35rem 0 0.2rem; - color: #ffffff; - font-family: "Bahnschrift SemiCondensed", "Arial Narrow", sans-serif; - font-size: clamp(1.65rem, 2.5vw, 2.2rem); - font-weight: 560; - line-height: 1.08; - letter-spacing: -0.025em; - overflow-wrap: anywhere; -} - -.nexus-identity-card__name p { - margin: 0; - color: #93a7bd; - overflow-wrap: anywhere; -} - -.nexus-identity-card__facts { - display: grid; - gap: 0; - margin: 2rem 0 3.5rem; -} - -.nexus-identity-card__facts > div { - display: grid; - gap: 0.28rem; - padding: 0.9rem 0; - border-top: 1px solid rgba(159, 176, 198, 0.12); -} - -.nexus-identity-card__facts dt { - color: #71869f; - font-family: "Cascadia Code", Consolas, monospace; - font-size: 0.59rem; - letter-spacing: 0.12em; - text-transform: uppercase; -} - -.nexus-identity-card__facts dd { - z-index: 1; - margin: 0; - color: #dfeaf5; - font-size: 0.86rem; - overflow-wrap: anywhere; -} - -.nexus-identity-card__footer { - position: absolute; - z-index: 1; - right: 1.4rem; - bottom: 1.3rem; - left: 1.4rem; - display: flex; - align-items: center; - gap: 0.6rem; - color: #70849b; - font-family: "Cascadia Code", Consolas, monospace; - font-size: 0.56rem; - letter-spacing: 0.08em; - text-transform: uppercase; -} - -.nexus-identity-card__footer span { - width: 1.8rem; - height: 1px; - background: var(--nexus-account-signal); -} - -.nexus-profile-editor { - overflow: hidden; - border: 1px solid var(--nexus-account-line); - border-radius: var(--nexus-account-radius-md); - background: var(--nexus-account-panel); - box-shadow: var(--nexus-account-shadow); -} - -.nexus-profile-editor__header { - display: grid; - grid-template-columns: 7rem minmax(0, 1fr); - gap: 1.5rem; - padding: clamp(1.5rem, 3vw, 2.25rem); - border-bottom: 1px solid var(--nexus-account-line); - background: color-mix( - in srgb, - var(--nexus-account-canvas) 48%, - var(--nexus-account-panel) - ); -} - -.nexus-profile-editor__header > span { - padding-top: 0.3rem; - color: var(--nexus-account-signal); - font-family: "Cascadia Code", Consolas, monospace; - font-size: 0.62rem; - font-weight: 600; - letter-spacing: 0.13em; - text-transform: uppercase; -} - -.nexus-profile-editor__header h2 { - margin: 0; - color: var(--nexus-account-text); - font-family: "Bahnschrift SemiCondensed", "Arial Narrow", sans-serif; - font-size: 1.55rem; - font-weight: 580; - letter-spacing: -0.02em; -} - -.nexus-profile-editor__header p { - max-width: 60ch; - margin: 0.35rem 0 0; - color: var(--nexus-account-muted); - line-height: 1.55; -} - -.nexus-profile-editor > .pf-v5-c-form { - max-width: none; - padding: clamp(1.5rem, 3vw, 2.5rem); -} - -.nexus-profile-editor .pf-v5-c-form__group { - padding-block: 0.6rem; -} - -.nexus-profile-editor .pf-v5-c-action-list { - margin-top: 1.2rem; - padding-top: 1.5rem; - border-top: 1px solid var(--nexus-account-line); -} - -.pf-v5-c-modal-box { - overflow: hidden; -} - -.pf-v5-c-modal-box__header { - border-bottom: 1px solid var(--nexus-account-line); -} - -.pf-v5-c-switch__toggle { - border-color: var(--nexus-account-line-strong); -} - -.pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle { - background: var(--nexus-account-signal); -} - -input[type="checkbox"], -input[type="radio"] { - accent-color: var(--nexus-account-signal); -} - -:focus-visible { - outline: 2px solid var(--nexus-account-signal-bright) !important; - outline-offset: 3px; -} - -@media (min-width: 769px) { - .pf-v5-c-page__main-section + .pf-v5-c-page__main-section > .pf-v5-c-form, - .pf-v5-c-page__main-section + .pf-v5-c-page__main-section > .pf-v5-c-card, - .pf-v5-c-page__main-section + .pf-v5-c-page__main-section > .pf-v5-c-data-list { - animation: nexus-account-arrive 360ms cubic-bezier(0.2, 0.7, 0.2, 1) both; - } -} - -@keyframes nexus-account-arrive { - from { - opacity: 0; - transform: translateY(8px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -@media (max-width: 768px) { - .pf-v5-c-masthead { - min-height: 60px; - } - - img.keycloak__pageheader_brand { - width: 158px; - height: 36px; - } - - .pf-v5-c-page__sidebar { - width: min(86vw, 300px); - } - - .pf-v5-c-page__sidebar-body { - padding-top: 1rem; - } - - .pf-v5-c-page__main-section { - padding-inline: 1rem; - } - - .pf-v5-c-page__main-section:first-child { - padding-block: 1.5rem; - } - - .pf-v5-c-page__main-section:first-child::after { - right: 1rem; - width: 4rem; - } - - .pf-v5-c-title.pf-m-2xl { - font-size: 2rem; - } - - .nexus-page-intro__mark { - display: none; - } - - .nexus-page-intro__kicker { - margin-bottom: 0.65rem; - } - - .nexus-profile-layout { - grid-template-columns: 1fr; - } - - .nexus-identity-card { - position: relative; - top: auto; - min-height: 0; - padding: 1.2rem; - } - - .nexus-identity-card__avatar { - width: 4.3rem; - height: 4.3rem; - margin: 1.6rem 0 1.2rem; - } - - .nexus-identity-card__facts { - grid-template-columns: 1fr 1fr; - gap: 0 1.2rem; - margin-bottom: 2.7rem; - } - - .nexus-identity-card__facts > div:last-child { - display: none; - } - - .nexus-profile-editor__header { - grid-template-columns: 1fr; - gap: 0.4rem; - } - - .pf-v5-c-data-list__item:first-child { - display: none; - } - - .pf-v5-c-data-list__cell { - padding-block: 0.35rem; - } - - .pf-v5-c-form__group-control { - max-width: 100%; - } -} - -@media (prefers-reduced-motion: reduce) { - *, - *::before, - *::after { - scroll-behavior: auto !important; - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; - } -} - -/* The class theme carries the bright archival language from its login screen. */ -html[data-kc-theme-name="class"] { - --nexus-account-void: #2868c7; - --nexus-account-chrome: #3f7fd6; - --nexus-account-panel: #ffffff; - --nexus-account-canvas: #f7fbff; - --nexus-account-canvas-strong: #e5f3ff; - --nexus-account-signal: #f05a47; - --nexus-account-signal-bright: #f6c54c; - --nexus-account-indigo: #23966f; - --nexus-account-mint: #f6c54c; - --nexus-account-text: #18324a; - --nexus-account-muted: #617387; - --nexus-account-line: #c8dbe8; - --nexus-account-line-strong: #9ebbd0; - --nexus-account-danger: #c93636; - --nexus-account-radius-sm: 2px; - --nexus-account-radius-md: 4px; - --nexus-account-shadow: 7px 7px 0 rgba(40, 104, 199, 0.1); - --pf-v5-global--primary-color--100: #3f7fd6; - --pf-v5-global--primary-color--200: #2868c7; - --pf-v5-global--link--Color: #2868c7; - --pf-v5-global--link--Color--hover: #174f9c; - --pf-v5-global--BackgroundColor--100: var(--nexus-account-panel); - --pf-v5-global--BackgroundColor--150: #fbfdff; - --pf-v5-global--BackgroundColor--200: var(--nexus-account-canvas); - --pf-v5-global--Color--100: var(--nexus-account-text); - --pf-v5-global--Color--200: var(--nexus-account-muted); - --pf-v5-global--BorderColor--100: var(--nexus-account-line); - --pf-v5-global--BorderColor--200: var(--nexus-account-line-strong); -} - -html[data-kc-theme-name="class"].pf-v5-theme-dark { - --nexus-account-void: #0d2742; - --nexus-account-chrome: #123453; - --nexus-account-panel: #0f2030; - --nexus-account-canvas: #08131e; - --nexus-account-canvas-strong: #173149; - --nexus-account-signal: #ff7465; - --nexus-account-signal-bright: #f2c45c; - --nexus-account-indigo: #54c99d; - --nexus-account-mint: #f2c45c; - --nexus-account-text: #e7f1f9; - --nexus-account-muted: #9ab0c2; - --nexus-account-line: #355168; - --nexus-account-line-strong: #58738a; - --nexus-account-danger: #ff8585; - --nexus-account-shadow: 7px 7px 0 #142a3e; - --pf-v5-global--primary-color--100: #6da8f6; - --pf-v5-global--primary-color--200: #91bdff; - --pf-v5-global--link--Color: #91bdff; - --pf-v5-global--link--Color--hover: #bdd7ff; - --pf-v5-global--BackgroundColor--150: #14293b; -} - -html[data-kc-theme-name="class"] .pf-v5-c-page__main { - background-image: linear-gradient(rgba(24, 50, 74, 0.035) 1px, transparent 1px), - linear-gradient(90deg, rgba(24, 50, 74, 0.035) 1px, transparent 1px); - background-position: 24px 24px; - background-size: 24px 24px; -} - -html[data-kc-theme-name="class"] .pf-v5-c-masthead { - border-bottom-color: rgba(246, 197, 76, 0.75); - background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), transparent 48%), - var(--nexus-account-void); - box-shadow: 0 8px 0 rgba(63, 127, 214, 0.12); -} - -html[data-kc-theme-name="class"] .pf-v5-c-masthead::after { - width: min(42vw, 38rem); - height: 4px; - background: linear-gradient( - 90deg, - var(--nexus-account-indigo) 0 34%, - var(--nexus-account-signal-bright) 34% 67%, - var(--nexus-account-signal) 67% - ); - opacity: 1; -} - -html[data-kc-theme-name="class"] .pf-v5-c-page__sidebar, -html[data-kc-theme-name="class"] .pf-v5-c-page__sidebar-body { - background: linear-gradient(165deg, rgba(255, 255, 255, 0.08), transparent 42%), - var(--nexus-account-chrome); -} - -html[data-kc-theme-name="class"] .pf-v5-c-page__sidebar { - border-right-color: rgba(246, 197, 76, 0.65); - box-shadow: 8px 0 0 rgba(63, 127, 214, 0.1); -} - -html[data-kc-theme-name="class"] .nexus-nav-context__eyebrow { - color: var(--nexus-account-signal-bright); -} - -html[data-kc-theme-name="class"] .nexus-profile-editor__header > span { - color: var(--nexus-account-signal); -} - -html[data-kc-theme-name="class"] .pf-v5-c-nav__link, -html[data-kc-theme-name="class"] .pf-v5-c-nav__section-title, -html[data-kc-theme-name="class"] .pf-v5-c-nav__link.pf-m-expandable { - color: rgba(255, 255, 255, 0.78); -} - -html[data-kc-theme-name="class"] .pf-v5-c-nav__link:hover, -html[data-kc-theme-name="class"] .pf-v5-c-nav__link:focus, -html[data-kc-theme-name="class"] .pf-v5-c-nav__link.pf-m-current, -html[data-kc-theme-name="class"] .pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link { - color: #ffffff; - background: linear-gradient(90deg, rgba(246, 197, 76, 0.2), rgba(240, 90, 71, 0.08)); -} - -html[data-kc-theme-name="class"] .nexus-identity-card { - border-color: rgba(246, 197, 76, 0.7); - border-radius: 4px; - background: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), - linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px), - #2868c7; - background-size: 24px 24px; - box-shadow: 10px 10px 0 rgba(35, 150, 111, 0.18); -} - -html[data-kc-theme-name="class"] .nexus-identity-card::before { - width: 100%; - height: 5px; - background: linear-gradient( - 90deg, - var(--nexus-account-indigo) 0 34%, - var(--nexus-account-signal-bright) 34% 67%, - var(--nexus-account-signal) 67% - ); -} - -html[data-kc-theme-name="class"] .nexus-identity-card::after { - display: none; -} - -html[data-kc-theme-name="class"] .nexus-identity-card__topline, -html[data-kc-theme-name="class"] .nexus-identity-card__name p, -html[data-kc-theme-name="class"] .nexus-identity-card__facts dt, -html[data-kc-theme-name="class"] .nexus-identity-card__footer { - color: rgba(255, 255, 255, 0.7); -} - -html[data-kc-theme-name="class"] .nexus-identity-card__facts dd { - color: #ffffff; -} - -html[data-kc-theme-name="class"] .nexus-identity-card__avatar { - border-color: var(--nexus-account-signal-bright); - border-radius: 2px; - color: #18324a; - background: var(--nexus-account-signal-bright); - box-shadow: 6px 6px 0 var(--nexus-account-signal); - transform: none; -} - -html[data-kc-theme-name="class"] .nexus-profile-editor, -html[data-kc-theme-name="class"] .pf-v5-c-card { - border-radius: 4px; } diff --git a/src/account/workspace.css b/src/account/workspace.css index 107efb8..a5c5e1a 100644 --- a/src/account/workspace.css +++ b/src/account/workspace.css @@ -34,12 +34,7 @@ height: 3px; margin-top: 0.48rem; border-radius: 99px; - background: linear-gradient( - 90deg, - var(--console-teal) 0 34%, - var(--console-amber) 34% 67%, - var(--console-coral) 67% - ); + background: var(--console-primary); } .nexus-nav-label { @@ -83,12 +78,7 @@ left: clamp(1.25rem, 3.2vw, 3.75rem); width: 3px; border-radius: 99px; - background: linear-gradient( - 180deg, - var(--console-teal) 0 34%, - var(--console-amber) 34% 67%, - var(--console-coral) 67% - ); + background: var(--console-primary); content: ""; } @@ -267,12 +257,7 @@ position: absolute; inset: 0 0 auto; height: 4px; - background: linear-gradient( - 90deg, - var(--console-teal) 0 34%, - var(--console-amber) 34% 67%, - var(--console-coral) 67% - ); + background: var(--console-primary); content: ""; } diff --git a/src/admin/PageNav.tsx b/src/admin/PageNav.tsx index fbb7635..7c9b435 100644 --- a/src/admin/PageNav.tsx +++ b/src/admin/PageNav.tsx @@ -10,13 +10,14 @@ import { useEnvironment } from "../shared/keycloak-ui-shared"; import { Label, Nav, + NavExpandable, NavGroup, PageSidebar, PageSidebarBody } from "../shared/@patternfly/react-core"; import { FormEvent } from "react"; import { useTranslation } from "react-i18next"; -import { NavLink, useNavigate } from "react-router-dom"; +import { NavLink, useLocation, useNavigate } from "react-router-dom"; import { useAccess } from "./context/access/Access"; import { useRealm } from "./context/realm-context/RealmContext"; import { useServerInfo } from "./context/server-info/ServerInfoProvider"; @@ -61,6 +62,7 @@ const LeftNav = ({ title, path, code, id }: LeftNavProps) => { id={name} data-testid={name} to={`/${encodedRealm}${path}`} + end={path === ""} className={({ isActive }) => `pf-v5-c-nav__link${isActive ? " pf-m-current" : ""}` } @@ -82,6 +84,7 @@ export const PageNav = () => { const isFeatureEnabled = useIsFeatureEnabled(); const pages = componentTypes?.["org.keycloak.services.ui.extend.UiPageProvider"]; const navigate = useNavigate(); + const { pathname } = useLocation(); const { realm, realmRepresentation } = useRealm(); type SelectedItem = { @@ -113,6 +116,27 @@ export const PageNav = () => { hasSomeAccess("realm-admin", "admin") && isFeatureEnabled(Feature.Workflows); const showManageRealm = environment.masterRealm === environment.realm; const realmName = resolveDisplayName(t, realmRepresentation.displayName, realm); + const managePaths = [ + "/organizations", + "/clients", + "/client-scopes", + "/roles", + "/users", + "/groups", + "/sessions", + "/events" + ]; + const configurePaths = [ + "/realm-settings", + "/authentication", + "/permissions", + "/identity-providers", + "/user-federation", + "/workflows", + "/page-section" + ]; + const isManageActive = managePaths.some(path => pathname.includes(path)); + const isConfigureActive = configurePaths.some(path => pathname.includes(path)); return ( @@ -151,7 +175,13 @@ export const PageNav = () => { )} {showManage && ( - + {isFeatureEnabled(Feature.Organizations) && realmRepresentation.organizationsEnabled && ( { - + )} {showConfigure && ( - + { code="EXT" /> ))} - + )}
diff --git a/src/admin/dashboard/dashboard.css b/src/admin/dashboard/dashboard.css index ff095d7..e1d532b 100644 --- a/src/admin/dashboard/dashboard.css +++ b/src/admin/dashboard/dashboard.css @@ -41,12 +41,7 @@ position: absolute; inset: auto 0 0; height: 5px; - background: linear-gradient( - 90deg, - var(--console-teal) 0 34%, - var(--console-amber) 34% 67%, - var(--console-coral) 67% - ); + background: linear-gradient(90deg, var(--console-primary), var(--console-teal)); content: ""; } diff --git a/src/admin/index.css b/src/admin/index.css index f20aa0e..d6c55e8 100644 --- a/src/admin/index.css +++ b/src/admin/index.css @@ -1,714 +1,26 @@ -:root { - --nexus-admin-void: #07101e; - --nexus-admin-chrome: #0b1728; - --nexus-admin-panel: #ffffff; - --nexus-admin-canvas: #f2f5f8; - --nexus-admin-canvas-strong: #e8edf2; - --nexus-admin-signal: #00a3b4; - --nexus-admin-signal-bright: #58d7e3; - --nexus-admin-indigo: #5d63d8; - --nexus-admin-mint: #8de3cf; - --nexus-admin-text: #142033; - --nexus-admin-muted: #607087; - --nexus-admin-line: #d8e0e8; - --nexus-admin-line-strong: #becad6; - --nexus-admin-danger: #c33d4d; - --nexus-admin-radius-sm: 5px; - --nexus-admin-radius-md: 9px; - --nexus-admin-shadow: 0 1px 2px rgba(20, 32, 51, 0.04), - 0 12px 34px rgba(20, 32, 51, 0.07); - --pf-v5-global--primary-color--100: #007f8e; - --pf-v5-global--primary-color--200: #006773; - --pf-v5-global--link--Color: #007985; - --pf-v5-global--link--Color--hover: #005963; - --pf-v5-global--BackgroundColor--100: var(--nexus-admin-panel); - --pf-v5-global--BackgroundColor--150: #f8fafb; - --pf-v5-global--BackgroundColor--200: var(--nexus-admin-canvas); - --pf-v5-global--Color--100: var(--nexus-admin-text); - --pf-v5-global--Color--200: var(--nexus-admin-muted); - --pf-v5-global--BorderColor--100: var(--nexus-admin-line); - --pf-v5-global--BorderColor--200: var(--nexus-admin-line-strong); - --pf-v5-c-page__main-section--m-light--BackgroundColor: var(--nexus-admin-canvas); - color-scheme: light; -} - -.pf-v5-theme-dark { - --nexus-admin-panel: #111d2e; - --nexus-admin-canvas: #08111f; - --nexus-admin-canvas-strong: #0d192a; - --nexus-admin-text: #edf4fb; - --nexus-admin-muted: #a6b5c8; - --nexus-admin-line: #2a3a50; - --nexus-admin-line-strong: #40516a; - --nexus-admin-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 16px 40px rgba(0, 0, 0, 0.28); - --pf-v5-global--primary-color--100: #58d7e3; - --pf-v5-global--primary-color--200: #8de7ee; - --pf-v5-global--link--Color: #68dbe5; - --pf-v5-global--link--Color--hover: #a0edf2; - --pf-v5-global--BackgroundColor--100: var(--nexus-admin-panel); - --pf-v5-global--BackgroundColor--150: #162338; - --pf-v5-global--BackgroundColor--200: var(--nexus-admin-canvas); - --pf-v5-global--Color--100: var(--nexus-admin-text); - --pf-v5-global--Color--200: var(--nexus-admin-muted); - --pf-v5-global--BorderColor--100: var(--nexus-admin-line); - --pf-v5-global--BorderColor--200: var(--nexus-admin-line-strong); - --pf-v5-c-page__main-section--m-light--BackgroundColor: var(--nexus-admin-canvas); - color-scheme: dark; -} +/* + * Admin compatibility layer. + * Visual tokens and shared PatternFly composition live in ../console-ui.css. + * Keep this file intentionally small so theme-specific legacy rules cannot + * override the light/dark workspace palette. + */ html, body, #root { - min-height: 100%; + height: 100%; } body { margin: 0; - color: var(--nexus-admin-text); - background: var(--nexus-admin-canvas); - font-family: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif; - font-size: 15px; - -webkit-font-smoothing: antialiased; } -.pf-v5-c-page, -.pf-v5-c-page__main, -.pf-v5-c-page__main-section { - background-color: var(--nexus-admin-canvas); -} - -.pf-v5-c-page__main { - position: relative; +#root { isolation: isolate; - background-image: radial-gradient( - circle at 94% 9%, - color-mix(in srgb, var(--nexus-admin-signal) 8%, transparent) 0, - transparent 24rem - ), - linear-gradient(rgba(41, 73, 104, 0.025) 1px, transparent 1px), - linear-gradient(90deg, rgba(41, 73, 104, 0.025) 1px, transparent 1px); - background-size: - auto, - 48px 48px, - 48px 48px; -} - -.pf-v5-c-masthead { - min-height: 72px; - border-bottom: 1px solid rgba(88, 215, 227, 0.2); - background: linear-gradient(90deg, rgba(88, 215, 227, 0.06), transparent 32%), - var(--nexus-admin-void); - box-shadow: 0 10px 30px rgba(3, 9, 20, 0.22); -} - -.pf-v5-c-masthead::after { - position: absolute; - right: 0; - bottom: -1px; - width: min(36vw, 34rem); - height: 1px; - background: linear-gradient(90deg, transparent, var(--nexus-admin-signal-bright)); - content: ""; - opacity: 0.65; -} - -img.keycloak__pageheader_brand { - width: 192px; - height: 42px; - object-fit: contain; - object-position: left center; -} - -.pf-v5-c-masthead .pf-v5-c-button.pf-m-link, -.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain { - color: #b9c8da; -} - -.pf-v5-c-masthead .pf-v5-c-button:hover { - color: #ffffff; -} - -.pf-v5-c-page__sidebar, -.pf-v5-c-page__sidebar-body { - color: #dce8f5; - background: radial-gradient( - circle at 28% 92%, - rgba(88, 215, 227, 0.1), - transparent 15rem - ), - linear-gradient(165deg, rgba(93, 99, 216, 0.08), transparent 38%), - var(--nexus-admin-chrome); -} - -.pf-v5-c-page__sidebar { - width: 284px; - border-right: 1px solid rgba(88, 215, 227, 0.14); - box-shadow: 12px 0 32px rgba(5, 13, 25, 0.08); -} - -.pf-v5-c-page__sidebar-body { - position: relative; - padding: 1.25rem 0.9rem 2rem; -} - -.pf-v5-c-page__sidebar-body::before { - display: block; - width: 72px; - height: 10px; - margin: 0.15rem 0.8rem 1.1rem; - background: radial-gradient( - circle, - var(--nexus-admin-signal-bright) 0 2px, - transparent 2.5px - ) - left center / 12px 10px repeat-x; - content: ""; - opacity: 0.9; - mask-image: linear-gradient(90deg, #000 55%, transparent); -} - -.pf-v5-c-nav__section-title { - padding-inline: 1rem; - color: #d9e5f2; - font-family: "Bahnschrift SemiCondensed", "Arial Narrow", sans-serif; - font-size: 1rem; - letter-spacing: 0.01em; -} - -.pf-v5-c-nav__section-title .pf-v5-c-label { - margin-top: 0.55rem; - border-color: rgba(88, 215, 227, 0.24); - color: var(--nexus-admin-signal-bright); - background: rgba(88, 215, 227, 0.08); - font-family: "Cascadia Code", Consolas, monospace; - font-size: 0.62rem; - text-transform: uppercase; -} - -.pf-v5-c-nav__section-title, -.pf-v5-c-nav__link, -.pf-v5-c-nav__group-title { - color: #9fb0c6; -} - -.pf-v5-c-nav__group-title { - padding: 1.25rem 1rem 0.45rem; - font-family: "Cascadia Code", Consolas, monospace; - font-size: 0.65rem; - font-weight: 600; - letter-spacing: 0.1em; - text-transform: uppercase; -} - -.pf-v5-c-nav__list { - display: grid; - gap: 0.18rem; -} - -.pf-v5-c-nav__link { - position: relative; - min-height: 42px; - padding: 0.68rem 0.9rem 0.68rem 1rem; - border-radius: var(--nexus-admin-radius-sm); - font-size: 0.88rem; - font-weight: 560; - transition: - color 150ms ease, - background-color 150ms ease, - transform 150ms ease; -} - -.pf-v5-c-nav__link:hover, -.pf-v5-c-nav__link:focus { - color: #ffffff; - background: rgba(88, 215, 227, 0.07); - transform: translateX(2px); -} - -.pf-v5-c-nav__link.pf-m-current, -.pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link { - color: #ffffff; - background: linear-gradient(90deg, rgba(88, 215, 227, 0.16), rgba(93, 99, 216, 0.08)); - box-shadow: - inset 3px 0 var(--nexus-admin-signal-bright), - 0 6px 18px rgba(0, 0, 0, 0.12); -} - -.pf-v5-c-nav__link.pf-m-current::after { - top: 50%; - right: 0.85rem; - width: 5px; - height: 5px; - border: 0; - border-radius: 50%; - background: var(--nexus-admin-mint); - box-shadow: 0 0 0 4px rgba(141, 227, 207, 0.1); - transform: translateY(-50%); -} - -.pf-v5-c-page__main-section, -.pf-v5-c-page__main-breadcrumb { - padding-inline: clamp(1.25rem, 3vw, 3.5rem); -} - -.pf-v5-c-page__main-section > *, -.pf-v5-c-page__main-breadcrumb > * { - width: 100%; - max-width: 1440px; - margin-inline: auto; -} - -.pf-v5-c-page__main-breadcrumb { - border-bottom: 1px solid color-mix(in srgb, var(--nexus-admin-line) 82%, transparent); - background: color-mix(in srgb, var(--nexus-admin-panel) 80%, transparent); - backdrop-filter: blur(16px); -} - -.pf-v5-c-page__main-section { - padding-top: clamp(1.5rem, 2.5vw, 2.75rem); - padding-bottom: 4rem; -} - -.pf-v5-c-title, -.pf-v5-c-content h1, -.pf-v5-c-content h2, -.pf-v5-c-page__main-title { - color: var(--nexus-admin-text); - font-family: "Bahnschrift SemiCondensed", "Arial Narrow", sans-serif; - letter-spacing: -0.025em; -} - -.pf-v5-c-title.pf-m-2xl, -.pf-v5-c-page__main-title { - font-size: clamp(2rem, 3vw, 2.8rem); - line-height: 1.05; -} - -.pf-v5-c-title.pf-m-2xl::before, -.pf-v5-c-page__main-title::before { - display: inline-block; - width: 0.48rem; - height: 0.48rem; - margin: 0 0.72rem 0.2rem 0; - border: 2px solid var(--nexus-admin-signal); - content: ""; - transform: rotate(45deg); -} - -.pf-v5-c-content > p, -.pf-v5-c-helper-text { - color: var(--nexus-admin-muted); - line-height: 1.65; -} - -.pf-v5-c-card, -.pf-v5-c-data-list, -.pf-v5-c-modal-box, -.pf-v5-c-drawer__panel, -.pf-v5-c-popover__content, -.pf-v5-c-menu { - border: 1px solid var(--nexus-admin-line); - border-radius: var(--nexus-admin-radius-md); - background: var(--nexus-admin-panel); - box-shadow: var(--nexus-admin-shadow); -} - -.pf-v5-c-card { - overflow: hidden; -} - -.pf-v5-c-card__title { - font-family: "Bahnschrift SemiCondensed", "Arial Narrow", sans-serif; - font-size: 1.12rem; - letter-spacing: -0.012em; -} - -.pf-v5-c-table { - overflow: hidden; - border: 1px solid var(--nexus-admin-line); - border-radius: var(--nexus-admin-radius-md); - background: var(--nexus-admin-panel); - box-shadow: 0 8px 28px rgba(20, 32, 51, 0.055); -} - -.pf-v5-c-table thead { - color: var(--nexus-admin-muted); - background: color-mix( - in srgb, - var(--nexus-admin-canvas) 64%, - var(--nexus-admin-panel) - ); - font-family: "Cascadia Code", Consolas, monospace; - font-size: 0.69rem; - letter-spacing: 0.045em; - text-transform: uppercase; -} - -.pf-v5-c-table tr > * { - border-bottom-color: var(--nexus-admin-line); -} - -.pf-v5-c-table tbody tr { - transition: background-color 140ms ease; -} - -.pf-v5-c-table tbody tr:hover > * { - background-color: color-mix( - in srgb, - var(--nexus-admin-signal) 5%, - var(--nexus-admin-panel) - ); -} - -.pf-v5-c-toolbar { - border-radius: var(--nexus-admin-radius-md); -} - -.pf-v5-c-toolbar__content { - padding-inline: 0; -} - -.pf-v5-c-form__label-text { - color: var(--nexus-admin-text); - font-weight: 620; -} - -.pf-v5-c-form__helper-text { - color: var(--nexus-admin-muted); - line-height: 1.5; -} - -.pf-v5-c-form-control, -.pf-v5-c-select__toggle, -.pf-v5-c-menu-toggle, -.pf-v5-c-number-input, -.pf-v5-c-search-input { - min-height: 40px; - border-color: var(--nexus-admin-line-strong); - border-radius: var(--nexus-admin-radius-sm); - color: var(--nexus-admin-text); - background: var(--nexus-admin-panel); - box-shadow: inset 0 1px 1px rgba(20, 32, 51, 0.025); - transition: - border-color 140ms ease, - box-shadow 140ms ease; -} - -.pf-v5-c-form-control:hover, -.pf-v5-c-menu-toggle:hover, -.pf-v5-c-search-input:hover { - border-color: color-mix( - in srgb, - var(--nexus-admin-signal) 58%, - var(--nexus-admin-line) - ); -} - -.pf-v5-c-form-control:focus-within, -.pf-v5-c-menu-toggle:focus, -.pf-v5-c-menu-toggle.pf-m-expanded, -.pf-v5-c-search-input:focus-within { - border-color: var(--nexus-admin-signal); - box-shadow: 0 0 0 3px color-mix(in srgb, var(--nexus-admin-signal) 15%, transparent); -} - -.pf-v5-c-button { - min-height: 38px; - border-radius: var(--nexus-admin-radius-sm); - font-weight: 650; - letter-spacing: 0.005em; - transition: - transform 140ms ease, - box-shadow 140ms ease, - filter 140ms ease; -} - -.pf-v5-c-button.pf-m-primary { - color: #ffffff; - background: var(--pf-v5-global--primary-color--100); - box-shadow: 0 7px 18px color-mix(in srgb, var(--nexus-admin-signal) 22%, transparent); -} - -.pf-v5-c-button.pf-m-primary:hover { - background: var(--pf-v5-global--primary-color--200); - box-shadow: 0 9px 22px color-mix(in srgb, var(--nexus-admin-signal) 28%, transparent); - transform: translateY(-1px); -} - -.pf-v5-c-button.pf-m-secondary { - border-color: var(--nexus-admin-line-strong); - color: var(--nexus-admin-text); - background: var(--nexus-admin-panel); -} - -.pf-v5-c-button.pf-m-danger { - background: var(--nexus-admin-danger); -} - -.pf-v5-c-tabs { - border-bottom: 1px solid var(--nexus-admin-line); -} - -.pf-v5-c-tabs__link { - color: var(--nexus-admin-muted); - font-weight: 620; -} - -.pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link { - color: var(--nexus-admin-text); -} - -.pf-v5-c-tabs__link::after { - height: 3px; - border-color: var(--nexus-admin-signal); -} - -.pf-v5-c-label { - border-radius: 999px; - font-weight: 620; -} - -.pf-v5-c-alert { - border: 1px solid var(--nexus-admin-line); - border-radius: var(--nexus-admin-radius-md); - box-shadow: 0 8px 24px rgba(20, 32, 51, 0.06); -} - -.pf-v5-c-empty-state { - border: 1px dashed var(--nexus-admin-line-strong); - border-radius: var(--nexus-admin-radius-md); - background: color-mix(in srgb, var(--nexus-admin-panel) 70%, transparent); -} - -.pf-v5-c-pagination { - color: var(--nexus-admin-muted); -} - -.pf-v5-c-pagination .pf-v5-c-menu-toggle, -.pf-v5-c-pagination .pf-v5-c-button { - min-height: 34px; -} - -.pf-v5-c-modal-box { - overflow: hidden; -} - -.pf-v5-c-modal-box__header { - border-bottom: 1px solid var(--nexus-admin-line); -} - -.pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle { - background: var(--nexus-admin-signal); -} - -.keycloak__form { - max-width: 1160px; - padding-bottom: var(--pf-v5-global--spacer--4xl); -} - -.keycloak__form_actions { - position: sticky; - z-index: 15; - bottom: 0; - margin: 2rem calc(-1 * clamp(1.25rem, 3vw, 3.5rem)) -4rem; - padding: 0.9rem clamp(1.25rem, 3vw, 3.5rem); - border-top: 1px solid var(--nexus-admin-line); - background: color-mix(in srgb, var(--nexus-admin-panel) 90%, transparent); - box-shadow: 0 -10px 30px rgba(20, 32, 51, 0.06); - backdrop-filter: blur(16px); -} - -input[type="checkbox"], -input[type="radio"] { - accent-color: var(--nexus-admin-signal); } .keycloak__section_intro__help { width: fit-content; padding: var(--pf-v5-global--spacer--md) 0 var(--pf-v5-global--spacer--lg); - color: var(--pf-v5-global--primary-color--100); -} - -div.w-tc-editor { - border: 1px solid var(--nexus-admin-line); - border-radius: var(--nexus-admin-radius-sm); - font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace; -} - -:focus-visible { - outline: 2px solid var(--nexus-admin-signal-bright) !important; - outline-offset: 3px; -} - -@media (min-width: 769px) { - .pf-v5-c-page__main-section > .pf-v5-c-card, - .pf-v5-c-page__main-section > .pf-v5-c-table, - .pf-v5-c-page__main-section > .pf-v5-c-form { - animation: nexus-admin-arrive 360ms cubic-bezier(0.2, 0.7, 0.2, 1) both; - } -} - -@keyframes nexus-admin-arrive { - from { - opacity: 0; - transform: translateY(8px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -@media (max-width: 768px) { - .pf-v5-c-masthead { - min-height: 60px; - } - - img.keycloak__pageheader_brand { - width: 158px; - height: 36px; - } - - .pf-v5-c-page__sidebar { - width: min(88vw, 310px); - } - - .pf-v5-c-page__main-section, - .pf-v5-c-page__main-breadcrumb { - padding-inline: 1rem; - } - - .pf-v5-c-title.pf-m-2xl, - .pf-v5-c-page__main-title { - font-size: 2rem; - } - - .keycloak__form_actions { - margin-inline: -1rem; - padding-inline: 1rem; - } -} - -@media (prefers-reduced-motion: reduce) { - *, - *::before, - *::after { - scroll-behavior: auto !important; - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; - } -} - -/* Keep the admin workspace in step with the class login/account variant. */ -html[data-kc-theme-name="class"] { - --nexus-admin-void: #2868c7; - --nexus-admin-chrome: #3f7fd6; - --nexus-admin-panel: #ffffff; - --nexus-admin-canvas: #f7fbff; - --nexus-admin-canvas-strong: #e5f3ff; - --nexus-admin-signal: #f05a47; - --nexus-admin-signal-bright: #f6c54c; - --nexus-admin-indigo: #23966f; - --nexus-admin-mint: #f6c54c; - --nexus-admin-text: #18324a; - --nexus-admin-muted: #617387; - --nexus-admin-line: #c8dbe8; - --nexus-admin-line-strong: #9ebbd0; - --nexus-admin-danger: #c93636; - --nexus-admin-radius-sm: 2px; - --nexus-admin-radius-md: 4px; - --nexus-admin-shadow: 7px 7px 0 rgba(40, 104, 199, 0.1); - --pf-v5-global--primary-color--100: #3f7fd6; - --pf-v5-global--primary-color--200: #2868c7; - --pf-v5-global--link--Color: #2868c7; - --pf-v5-global--link--Color--hover: #174f9c; - --pf-v5-global--BackgroundColor--100: var(--nexus-admin-panel); - --pf-v5-global--BackgroundColor--150: #fbfdff; - --pf-v5-global--BackgroundColor--200: var(--nexus-admin-canvas); - --pf-v5-global--Color--100: var(--nexus-admin-text); - --pf-v5-global--Color--200: var(--nexus-admin-muted); - --pf-v5-global--BorderColor--100: var(--nexus-admin-line); - --pf-v5-global--BorderColor--200: var(--nexus-admin-line-strong); - --pf-v5-c-page__main-section--m-light--BackgroundColor: var(--nexus-admin-canvas); -} - -html[data-kc-theme-name="class"].pf-v5-theme-dark { - --nexus-admin-void: #0d2742; - --nexus-admin-chrome: #123453; - --nexus-admin-panel: #0f2030; - --nexus-admin-canvas: #08131e; - --nexus-admin-canvas-strong: #173149; - --nexus-admin-signal: #ff7465; - --nexus-admin-signal-bright: #f2c45c; - --nexus-admin-indigo: #54c99d; - --nexus-admin-mint: #f2c45c; - --nexus-admin-text: #e7f1f9; - --nexus-admin-muted: #9ab0c2; - --nexus-admin-line: #355168; - --nexus-admin-line-strong: #58738a; - --nexus-admin-danger: #ff8585; - --nexus-admin-shadow: 7px 7px 0 #142a3e; - --pf-v5-global--primary-color--100: #6da8f6; - --pf-v5-global--primary-color--200: #91bdff; - --pf-v5-global--link--Color: #91bdff; - --pf-v5-global--link--Color--hover: #bdd7ff; - --pf-v5-global--BackgroundColor--150: #14293b; -} - -html[data-kc-theme-name="class"] .pf-v5-c-page__main { - background-image: linear-gradient(rgba(24, 50, 74, 0.035) 1px, transparent 1px), - linear-gradient(90deg, rgba(24, 50, 74, 0.035) 1px, transparent 1px); - background-position: 24px 24px; - background-size: 24px 24px; -} - -html[data-kc-theme-name="class"] .pf-v5-c-masthead { - border-bottom-color: rgba(246, 197, 76, 0.75); - background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), transparent 48%), - var(--nexus-admin-void); - box-shadow: 0 8px 0 rgba(63, 127, 214, 0.12); -} - -html[data-kc-theme-name="class"] .pf-v5-c-masthead::after { - width: min(42vw, 38rem); - height: 4px; - background: linear-gradient( - 90deg, - var(--nexus-admin-indigo) 0 34%, - var(--nexus-admin-signal-bright) 34% 67%, - var(--nexus-admin-signal) 67% - ); - opacity: 1; -} - -html[data-kc-theme-name="class"] .pf-v5-c-page__sidebar, -html[data-kc-theme-name="class"] .pf-v5-c-page__sidebar-body { - background: linear-gradient(165deg, rgba(255, 255, 255, 0.08), transparent 42%), - var(--nexus-admin-chrome); -} - -html[data-kc-theme-name="class"] .pf-v5-c-page__sidebar { - border-right-color: rgba(246, 197, 76, 0.65); - box-shadow: 8px 0 0 rgba(63, 127, 214, 0.1); -} - -html[data-kc-theme-name="class"] .pf-v5-c-nav__link, -html[data-kc-theme-name="class"] .pf-v5-c-nav__section-title, -html[data-kc-theme-name="class"] .pf-v5-c-nav__link.pf-m-expandable { - color: rgba(255, 255, 255, 0.78); -} - -html[data-kc-theme-name="class"] .pf-v5-c-nav__link:hover, -html[data-kc-theme-name="class"] .pf-v5-c-nav__link:focus, -html[data-kc-theme-name="class"] .pf-v5-c-nav__link.pf-m-current, -html[data-kc-theme-name="class"] .pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link { - color: #ffffff; - background: linear-gradient(90deg, rgba(246, 197, 76, 0.2), rgba(240, 90, 71, 0.08)); -} - -html[data-kc-theme-name="class"] .pf-v5-c-card, -html[data-kc-theme-name="class"] .pf-v5-c-modal-box, -html[data-kc-theme-name="class"] .pf-v5-c-empty-state { - border-radius: 4px; + color: var(--console-primary-deep); } diff --git a/src/admin/page-nav.css b/src/admin/page-nav.css index 139a834..0f9b1ac 100644 --- a/src/admin/page-nav.css +++ b/src/admin/page-nav.css @@ -1,7 +1,61 @@ .keycloak__page_nav__nav { --pf-v5-c-page__sidebar--Transition: all 120ms cubic-bezier(0.2, 0.7, 0.2, 1); - overflow: inherit; - overflow-y: auto; + --pf-v5-c-page__sidebar--BackgroundColor: var(--console-nav); + overflow: visible !important; + color: var(--console-ink) !important; + background: var(--console-nav) !important; +} + +.keycloak__page_nav__nav .pf-v5-c-page__sidebar-body { + overflow-y: visible !important; + color: var(--console-ink) !important; + background: var(--console-nav) !important; +} + +.keycloak__page_nav__nav .pf-v5-c-nav { + --pf-v5-c-nav__link--Color: var(--console-muted); + --pf-v5-c-nav__link--hover--Color: var(--console-ink); + --pf-v5-c-nav__link--focus--Color: var(--console-ink); + --pf-v5-c-nav__link--hover--BackgroundColor: color-mix( + in srgb, + var(--console-surface) 82%, + transparent + ); + --pf-v5-c-nav__link--focus--BackgroundColor: color-mix( + in srgb, + var(--console-surface) 82%, + transparent + ); + --pf-v5-c-nav__link--m-current--Color: var(--console-primary-deep); + --pf-v5-c-nav__link--m-current--BackgroundColor: color-mix( + in srgb, + var(--console-primary) 9%, + var(--console-surface) + ); + color: var(--console-ink); + background: transparent; +} + +.keycloak__page_nav__nav .pf-v5-c-nav__link, +.keycloak__page_nav__nav .pf-v5-c-nav__link.pf-m-expandable { + color: var(--console-muted) !important; +} + +.keycloak__page_nav__nav .pf-v5-c-nav__link:hover, +.keycloak__page_nav__nav .pf-v5-c-nav__link:focus { + color: var(--console-ink) !important; +} + +.keycloak__page_nav__nav .pf-v5-c-nav__link.pf-m-current, +.keycloak__page_nav__nav + .pf-v5-c-nav__item:not(.pf-m-expandable).pf-m-current + > .pf-v5-c-nav__link { + color: var(--console-primary-deep) !important; + background: color-mix( + in srgb, + var(--console-primary) 9%, + var(--console-surface) + ) !important; } .admin-nav-context { @@ -12,6 +66,21 @@ border-bottom: 1px solid var(--console-line); } +.admin-nav-group > .pf-v5-c-nav__link.pf-m-expandable { + min-height: 40px; + margin-top: 0.25rem; + color: var(--console-ink); + font-size: 0.76rem; + font-weight: 760; + letter-spacing: 0.055em; + text-transform: uppercase; +} + +.admin-nav-group .pf-v5-c-nav__subnav { + margin-top: 0.25rem; + padding-left: 0; +} + .admin-nav-context__eyebrow { color: var(--console-primary-deep); font-size: 0.64rem; @@ -94,3 +163,10 @@ font-weight: 700; letter-spacing: 0.04em; } + +@media (max-width: 768px) { + .keycloak__page_nav__nav, + .keycloak__page_nav__nav .pf-v5-c-page__sidebar-body { + overflow-y: auto !important; + } +} diff --git a/src/admin/workspace.css b/src/admin/workspace.css index 393066a..5ef7fa4 100644 --- a/src/admin/workspace.css +++ b/src/admin/workspace.css @@ -22,12 +22,7 @@ left: clamp(1.25rem, 3.2vw, 3.75rem); width: 3px; border-radius: 99px; - background: linear-gradient( - 180deg, - var(--console-teal) 0 34%, - var(--console-amber) 34% 67%, - var(--console-coral) 67% - ); + background: var(--console-primary); content: ""; } diff --git a/src/console-ui.css b/src/console-ui.css index 31c3cb8..26068e0 100644 --- a/src/console-ui.css +++ b/src/console-ui.css @@ -5,20 +5,20 @@ */ :root { - --console-ink: #15334c; - --console-muted: #5f768a; - --console-faint: #8399aa; - --console-canvas: #edf5fa; + --console-ink: #1d2a33; + --console-muted: #64727c; + --console-faint: #87939b; + --console-canvas: #f4f6f7; --console-surface: #ffffff; - --console-surface-soft: #f6fafc; + --console-surface-soft: #f8f9f9; --console-surface-raised: #ffffff; - --console-surface-sunken: #e7f0f6; - --console-nav: #e5f0f7; - --console-line: #d2e0e9; - --console-line-strong: #adc3d2; - --console-primary: #2f72d6; - --console-primary-deep: #1f58ad; - --console-teal: #1e9476; + --console-surface-sunken: #edf0f1; + --console-nav: #eef1f2; + --console-line: #d9dfe2; + --console-line-strong: #bac5ca; + --console-primary: #34747a; + --console-primary-deep: #245b61; + --console-teal: #347f72; --console-amber: #d99b25; --console-coral: #dd5c4b; --console-danger: #c94046; @@ -37,6 +37,9 @@ --pf-v5-global--Color--200: var(--console-muted); --pf-v5-global--BorderColor--100: var(--console-line); --pf-v5-global--BorderColor--200: var(--console-line-strong); + --pf-v5-c-masthead--BackgroundColor: var(--console-surface); + --pf-v5-c-masthead--c-toolbar--BackgroundColor: var(--console-surface); + --pf-v5-c-page__sidebar--BackgroundColor: var(--console-nav); --pf-v5-c-page__main-section--m-light--BackgroundColor: transparent; color-scheme: light; } @@ -45,17 +48,17 @@ --console-ink: #eaf2f8; --console-muted: #a4b5c4; --console-faint: #8295a7; - --console-canvas: #09151f; - --console-surface: #122331; - --console-surface-soft: #172b3a; - --console-surface-raised: #192d3d; - --console-surface-sunken: #0d1d29; - --console-nav: #0d1d29; - --console-line: #294354; - --console-line-strong: #49667a; - --console-primary: #78a8ff; - --console-primary-deep: #96baff; - --console-teal: #61c7aa; + --console-canvas: #10171c; + --console-surface: #182229; + --console-surface-soft: #1d2930; + --console-surface-raised: #202c34; + --console-surface-sunken: #121b21; + --console-nav: #141e24; + --console-line: #304048; + --console-line-strong: #52636b; + --console-primary: #75adb0; + --console-primary-deep: #93c2c4; + --console-teal: #6aafa0; --console-amber: #f2c45c; --console-coral: #ff8173; --console-danger: #ff858b; @@ -75,17 +78,17 @@ } html[data-kc-theme-name="class"] { - --console-ink: #18324a; - --console-muted: #61778c; - --console-canvas: #f4f9fd; - --console-nav: #edf6fc; + --console-ink: #202c33; + --console-muted: #66757c; + --console-canvas: #f6f7f7; + --console-nav: #eff2f2; --console-surface-raised: #ffffff; - --console-surface-sunken: #e8f3fa; - --console-line: #d4e3ee; - --console-line-strong: #abc4d7; - --console-primary: #3f7fd6; - --console-primary-deep: #2868c7; - --console-teal: #23966f; + --console-surface-sunken: #ecefef; + --console-line: #d9dfe0; + --console-line-strong: #b7c3c5; + --console-primary: #3a7277; + --console-primary-deep: #285b60; + --console-teal: #3b7f70; --console-amber: #f0b92e; --console-coral: #ef6654; } @@ -93,17 +96,17 @@ html[data-kc-theme-name="class"] { html[data-kc-theme-name="class"].pf-v5-theme-dark { --console-ink: #e7f1f9; --console-muted: #9ab0c2; - --console-canvas: #0a1723; - --console-surface: #102435; - --console-surface-soft: #152c3e; - --console-nav: #0d2132; - --console-surface-raised: #193246; - --console-surface-sunken: #0a1824; - --console-line: #2d485d; - --console-line-strong: #4d6c82; - --console-primary: #76aafa; - --console-primary-deep: #9bc0ff; - --console-teal: #58cba2; + --console-canvas: #11181d; + --console-surface: #19242a; + --console-surface-soft: #1e2b31; + --console-nav: #151f24; + --console-surface-raised: #222f35; + --console-surface-sunken: #121b20; + --console-line: #314147; + --console-line-strong: #53656c; + --console-primary: #78aeb0; + --console-primary-deep: #97c4c5; + --console-teal: #70ad9f; --console-amber: #f2c45c; --console-coral: #ff8173; } @@ -145,43 +148,46 @@ html[data-console-color-mode] .pf-v5-c-masthead { overflow-x: clip; background-color: var(--console-canvas); background-image: radial-gradient( - circle at 92% 1%, - color-mix(in srgb, var(--console-primary) 8%, transparent), - transparent 27rem - ), - linear-gradient( - 90deg, - color-mix(in srgb, var(--console-line) 20%, transparent) 1px, - transparent 1px - ); - background-size: - auto, - 112px 100%; + circle at 92% 1%, + color-mix(in srgb, var(--console-primary) 5%, transparent), + transparent 30rem + ); } /* Header: quiet, bright, and consistent across both consoles. */ .pf-v5-c-masthead { + --pf-v5-c-masthead--BackgroundColor: var(--console-surface); + --pf-v5-c-masthead--c-toolbar--BackgroundColor: var(--console-surface); min-height: 68px; border: 0; border-bottom: 1px solid var(--console-line); color: var(--console-ink); - background: color-mix(in srgb, var(--console-surface) 94%, transparent); + background: color-mix(in srgb, var(--console-surface) 94%, transparent) !important; box-shadow: 0 6px 24px rgba(23, 50, 77, 0.055); backdrop-filter: blur(18px); } +.pf-v5-c-masthead, +.pf-v5-c-masthead__main, +.pf-v5-c-masthead__content, +.pf-v5-c-masthead .pf-v5-c-toolbar, +.pf-v5-c-masthead .pf-v5-c-toolbar__content { + color: var(--console-ink) !important; +} + +.pf-v5-c-masthead .pf-v5-c-menu-toggle { + --pf-v5-c-menu-toggle--Color: var(--console-ink); + --pf-v5-c-menu-toggle--BackgroundColor: var(--console-surface-soft); + color: var(--console-ink) !important; + background: var(--console-surface-soft) !important; +} + .pf-v5-c-masthead::after { right: 0; bottom: -1px; - width: min(34vw, 32rem); - height: 3px; - background: linear-gradient( - 90deg, - transparent 0 8%, - var(--console-teal) 8% 40%, - var(--console-amber) 40% 70%, - var(--console-coral) 70% - ); + width: min(28vw, 25rem); + height: 2px; + background: linear-gradient(90deg, transparent, var(--console-primary)); opacity: 1; } @@ -237,10 +243,11 @@ img.keycloak__pageheader_brand { .pf-v5-c-page__sidebar, .pf-v5-c-page__sidebar-body { color: var(--console-ink); - background: var(--console-nav); + background: var(--console-nav) !important; } .pf-v5-c-page__sidebar { + --pf-v5-c-page__sidebar--BackgroundColor: var(--console-nav); width: 272px; border-right: 1px solid var(--console-line); box-shadow: none; @@ -258,7 +265,7 @@ img.keycloak__pageheader_brand { .pf-v5-c-nav__link, .pf-v5-c-nav__group-title, .pf-v5-c-nav__link.pf-m-expandable { - color: var(--console-muted); + color: var(--console-muted) !important; } .pf-v5-c-nav__section-title { @@ -296,17 +303,21 @@ img.keycloak__pageheader_brand { .pf-v5-c-nav__link:hover, .pf-v5-c-nav__link:focus { - color: var(--console-ink); + color: var(--console-ink) !important; border-color: color-mix(in srgb, var(--console-primary) 15%, var(--console-line)); - background: color-mix(in srgb, var(--console-surface) 82%, transparent); + background: color-mix(in srgb, var(--console-surface) 82%, transparent) !important; transform: none; } .pf-v5-c-nav__link.pf-m-current, -.pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link { - color: var(--console-primary-deep); +.pf-v5-c-nav__item:not(.pf-m-expandable).pf-m-current > .pf-v5-c-nav__link { + color: var(--console-primary-deep) !important; border-color: color-mix(in srgb, var(--console-primary) 22%, var(--console-line)); - background: var(--console-surface); + background: color-mix( + in srgb, + var(--console-primary) 9%, + var(--console-surface) + ) !important; box-shadow: 0 8px 22px rgba(39, 82, 124, 0.08); }