From 8c9dc610bddeff8428ea49aedda55069ecbc878f Mon Sep 17 00:00:00 2001 From: biss Date: Sun, 23 Aug 2026 17:33:36 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BE=8E=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 2 +- public/unified-identity-icon.svg | 8 ++++ src/account/assets/logo.svg | 10 +++-- src/admin/assets/logo.svg | 10 +++-- src/admin/dashboard/dashboard.css | 12 +++--- src/admin/page-nav.css | 6 ++- src/admin/workspace.css | 62 ++++++++++++------------------ src/console-ui.css | 51 +++++++++++++++--------- src/login/Template.tsx | 5 ++- src/login/theme.css | 12 +++--- src/shared/UnifiedIdentityMark.tsx | 37 ++++++++++++++++++ 11 files changed, 133 insertions(+), 82 deletions(-) create mode 100644 public/unified-identity-icon.svg create mode 100644 src/shared/UnifiedIdentityMark.tsx diff --git a/index.html b/index.html index 089aa15..ad17720 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - + diff --git a/public/unified-identity-icon.svg b/public/unified-identity-icon.svg new file mode 100644 index 0000000..6ceee58 --- /dev/null +++ b/public/unified-identity-icon.svg @@ -0,0 +1,8 @@ + + 统一身份认证 + + + + + + diff --git a/src/account/assets/logo.svg b/src/account/assets/logo.svg index 44ff9ab..f17f517 100644 --- a/src/account/assets/logo.svg +++ b/src/account/assets/logo.svg @@ -1,9 +1,11 @@ NEXUS ID - - - - + + + + + + NEXUS WORKSPACE diff --git a/src/admin/assets/logo.svg b/src/admin/assets/logo.svg index 44ff9ab..f17f517 100644 --- a/src/admin/assets/logo.svg +++ b/src/admin/assets/logo.svg @@ -1,9 +1,11 @@ NEXUS ID - - - - + + + + + + NEXUS WORKSPACE diff --git a/src/admin/dashboard/dashboard.css b/src/admin/dashboard/dashboard.css index e1d532b..d290c61 100644 --- a/src/admin/dashboard/dashboard.css +++ b/src/admin/dashboard/dashboard.css @@ -21,8 +21,8 @@ background: linear-gradient( 135deg, var(--console-surface) 0%, - color-mix(in srgb, var(--console-primary) 8%, var(--console-surface)) 58%, - color-mix(in srgb, var(--console-teal) 12%, var(--console-surface)) 100% + color-mix(in srgb, var(--console-primary) 5%, var(--console-surface)) 58%, + color-mix(in srgb, var(--console-primary) 10%, var(--console-surface)) 100% ); box-shadow: var(--console-shadow); } @@ -41,7 +41,7 @@ position: absolute; inset: auto 0 0; height: 5px; - background: linear-gradient(90deg, var(--console-primary), var(--console-teal)); + background: var(--console-primary); content: ""; } @@ -226,13 +226,13 @@ --card-tone: var(--console-primary); } .admin-dashboard-link-card.is-green { - --card-tone: var(--console-teal); + --card-tone: var(--console-primary); } .admin-dashboard-link-card.is-amber { - --card-tone: var(--console-amber); + --card-tone: var(--console-primary); } .admin-dashboard-link-card.is-coral { - --card-tone: var(--console-coral); + --card-tone: var(--console-primary); } .admin-dashboard-link-card__code { diff --git a/src/admin/page-nav.css b/src/admin/page-nav.css index 0f9b1ac..ca56e06 100644 --- a/src/admin/page-nav.css +++ b/src/admin/page-nav.css @@ -1,13 +1,15 @@ .keycloak__page_nav__nav { --pf-v5-c-page__sidebar--Transition: all 120ms cubic-bezier(0.2, 0.7, 0.2, 1); --pf-v5-c-page__sidebar--BackgroundColor: var(--console-nav); - overflow: visible !important; + overflow-x: hidden; + overflow-y: auto; color: var(--console-ink) !important; background: var(--console-nav) !important; } .keycloak__page_nav__nav .pf-v5-c-page__sidebar-body { - overflow-y: visible !important; + overflow-x: hidden; + overflow-y: auto; color: var(--console-ink) !important; background: var(--console-nav) !important; } diff --git a/src/admin/workspace.css b/src/admin/workspace.css index 5ef7fa4..7b1bf27 100644 --- a/src/admin/workspace.css +++ b/src/admin/workspace.css @@ -10,20 +10,9 @@ .admin-view-header { position: relative; - padding-top: clamp(1.7rem, 3vw, 2.7rem); - padding-bottom: clamp(1.25rem, 2.5vw, 2rem); - background: transparent; -} - -.admin-view-header::before { - position: absolute; - top: 0; - bottom: 0; - left: clamp(1.25rem, 3.2vw, 3.75rem); - width: 3px; - border-radius: 99px; - background: var(--console-primary); - content: ""; + padding-top: clamp(1.5rem, 2.5vw, 2.25rem); + padding-bottom: clamp(1.1rem, 2vw, 1.6rem); + background: var(--console-surface-soft); } .admin-view-header__layout { @@ -31,7 +20,7 @@ grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 1.5rem; - padding-left: 1.25rem; + padding-left: 0; } .admin-view-header__copy { @@ -40,7 +29,7 @@ .admin-view-header__eyebrow { display: block; - margin-bottom: 0.55rem; + margin-bottom: 0.45rem; color: var(--console-primary-deep); font-size: 0.67rem; font-weight: 800; @@ -92,7 +81,7 @@ .admin-view-header__lower-actions { margin-top: 1.25rem; - padding-left: 1.25rem; + padding-left: 0; } .admin-view-header__divider { @@ -170,18 +159,23 @@ color: var(--console-ink); } -.admin-workspace-route .pf-v5-c-form__actions, -.admin-workspace-route .keycloak__form_actions { - position: sticky; - bottom: 0; - z-index: 6; - margin-top: 2rem; - padding: 1rem; - border: 1px solid var(--console-line); - border-radius: 12px; - background: color-mix(in srgb, var(--console-surface) 92%, transparent); - box-shadow: 0 -10px 28px color-mix(in srgb, var(--console-ink) 8%, transparent); - backdrop-filter: blur(16px); +/* Keycloak's stock fixed action bar spans the viewport and leaves a large, + * disconnected panel below the form. Actions belong to the form they save. */ +.admin-workspace-route .keycloak__form { + padding-bottom: 0; +} + +.keycloak__form_actions, +.admin-workspace-route .pf-v5-c-form__actions { + position: static; + width: auto; + margin: 2rem 0 0; + padding: 1.25rem 0 0; + border: 0; + border-top: 1px solid var(--console-line); + border-radius: 0; + background: transparent; + box-shadow: none; } .admin-workspace-route .pf-v5-c-wizard { @@ -207,15 +201,11 @@ } @media (max-width: 768px) { - .admin-view-header::before { - left: 1rem; - } - .admin-view-header__layout { grid-template-columns: 1fr; align-items: start; gap: 1rem; - padding-left: 1rem; + padding-left: 0; } .admin-view-header__actions { @@ -226,8 +216,4 @@ font-size: 2rem; } - .admin-workspace-route .pf-v5-c-form__actions, - .admin-workspace-route .keycloak__form_actions { - position: static; - } } diff --git a/src/console-ui.css b/src/console-ui.css index 26068e0..bfe0454 100644 --- a/src/console-ui.css +++ b/src/console-ui.css @@ -5,31 +5,31 @@ */ :root { - --console-ink: #1d2a33; - --console-muted: #64727c; - --console-faint: #87939b; - --console-canvas: #f4f6f7; + --console-ink: #172b4d; + --console-muted: #5e6c84; + --console-faint: #8995a8; + --console-canvas: #f6f8fc; --console-surface: #ffffff; - --console-surface-soft: #f8f9f9; + --console-surface-soft: #f8faff; --console-surface-raised: #ffffff; - --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-surface-sunken: #edf2f9; + --console-nav: #f1f5fb; + --console-line: #dce4f0; + --console-line-strong: #b9c7db; + --console-primary: #2563eb; + --console-primary-deep: #1749b8; + --console-teal: #2563eb; --console-amber: #d99b25; --console-coral: #dd5c4b; --console-danger: #c94046; --console-radius-sm: 8px; - --console-radius: 14px; - --console-shadow: 0 1px 2px rgba(23, 50, 77, 0.04), - 0 14px 38px rgba(23, 50, 77, 0.075); + --console-radius: 12px; + --console-shadow: 0 1px 2px rgba(23, 43, 77, 0.035), + 0 12px 30px rgba(23, 43, 77, 0.06); --pf-v5-global--primary-color--100: var(--console-primary); --pf-v5-global--primary-color--200: var(--console-primary-deep); --pf-v5-global--link--Color: var(--console-primary-deep); - --pf-v5-global--link--Color--hover: #173f88; + --pf-v5-global--link--Color--hover: #123895; --pf-v5-global--BackgroundColor--100: var(--console-surface); --pf-v5-global--BackgroundColor--150: var(--console-surface-soft); --pf-v5-global--BackgroundColor--200: var(--console-canvas); @@ -162,8 +162,8 @@ html[data-console-color-mode] .pf-v5-c-masthead { border: 0; border-bottom: 1px solid var(--console-line); color: var(--console-ink); - background: color-mix(in srgb, var(--console-surface) 94%, transparent) !important; - box-shadow: 0 6px 24px rgba(23, 50, 77, 0.055); + background: var(--console-surface) !important; + box-shadow: 0 4px 16px rgba(23, 43, 77, 0.045); backdrop-filter: blur(18px); } @@ -248,11 +248,24 @@ img.keycloak__pageheader_brand { .pf-v5-c-page__sidebar { --pf-v5-c-page__sidebar--BackgroundColor: var(--console-nav); - width: 272px; + width: 264px; border-right: 1px solid var(--console-line); box-shadow: none; } +/* PatternFly collapses the rail with max-width: 0. Never let its contents + * escape that box: otherwise labels become a clipped vertical strip. */ +.pf-v5-c-page__sidebar.pf-m-collapsed, +.pf-v5-c-page__sidebar.pf-m-collapsed .pf-v5-c-page__sidebar-body { + overflow: hidden !important; +} + +.pf-v5-c-page__sidebar.pf-m-collapsed { + width: 0; + min-width: 0; + border-right: 0; +} + .pf-v5-c-page__sidebar-body { padding: 1.25rem 0.9rem 2rem; } diff --git a/src/login/Template.tsx b/src/login/Template.tsx index 81d54c9..db493c7 100644 --- a/src/login/Template.tsx +++ b/src/login/Template.tsx @@ -2,6 +2,7 @@ import BaseTemplate from "keycloakify/login/Template"; import type { TemplateProps } from "keycloakify/login/TemplateProps"; import type { KcContext } from "./KcContext"; import type { I18n } from "./i18n"; +import { UnifiedIdentityMark } from "../shared/UnifiedIdentityMark"; export default function Template(props: TemplateProps) { const { msg } = props.i18n; @@ -63,13 +64,13 @@ export default function Template(props: TemplateProps) {
- N +