From 78622a40121b67a8d545d449a33397758b3132ff Mon Sep 17 00:00:00 2001 From: tischsoic Date: Tue, 18 Aug 2026 22:52:55 +0200 Subject: [PATCH 01/10] IBX-12207: Updated main header styling to match new design Co-Authored-By: Claude --- .../Resources/public/scss/_extra-actions.scss | 4 +- .../Resources/public/scss/_global-search.scss | 22 +++++--- .../public/scss/_header-user-menu.scss | 50 +++++++++++-------- .../public/scss/_main-container.scss | 2 +- .../Resources/public/scss/_main-header.scss | 9 ++-- .../Resources/public/scss/_main-menu.scss | 2 +- .../Resources/public/scss/_preview.scss | 2 +- .../Resources/public/scss/_side-panel.scss | 4 +- .../public/scss/_user-mode-badge.scss | 19 +++---- 9 files changed, 64 insertions(+), 50 deletions(-) diff --git a/src/bundle/Resources/public/scss/_extra-actions.scss b/src/bundle/Resources/public/scss/_extra-actions.scss index 5805791059..92e5642adf 100644 --- a/src/bundle/Resources/public/scss/_extra-actions.scss +++ b/src/bundle/Resources/public/scss/_extra-actions.scss @@ -12,9 +12,9 @@ background-color: $ibexa-color-white; padding: calculateRem(16px) 0; width: calculateRem(700px); - height: calc(100vh - #{calculateRem(73px)}); + height: calc(100vh - #{calculateRem(64px)}); position: fixed; - top: calculateRem(73px); + top: calculateRem(64px); right: 0; z-index: 200; transform: translate(0, 0) scaleX(1); diff --git a/src/bundle/Resources/public/scss/_global-search.scss b/src/bundle/Resources/public/scss/_global-search.scss index b2091628ad..9eb4d34f94 100644 --- a/src/bundle/Resources/public/scss/_global-search.scss +++ b/src/bundle/Resources/public/scss/_global-search.scss @@ -1,17 +1,18 @@ @use '@ibexa-admin-ui/src/bundle/Resources/public/scss/custom.scss' as *; @use '@ibexa-admin-ui/src/bundle/Resources/public/scss/functions/calculate.rem' as *; +@use '@ibexa-admin-ui-assets/src/bundle/Resources/public/vendors/ids-assets/dist/scss/variables/colors' as *; @use 'sass:color'; .ibexa-global-search { width: 100%; - max-width: calculateRem(600px); + max-width: calculateRem(500px); position: relative; --ibexa-input-text-color: #{$ibexa-color-white}; --ibexa-text-color: #{$ibexa-color-white}; .ids-input-text { - --ids-input-default-bg-color: #{color.change($ibexa-color-white, $alpha: 0.1)}; - --ids-input-default-border-color: transparent; + --ids-input-default-bg-color: #{$ibexa-color-dark-500}; + --ids-input-default-border-color: #{$color-neutral-210}; --ids-input-default-text-color: #{$ibexa-color-white}; --ids-input-hover-border-color: #{$ibexa-color-info-600}; --ids-input-active-border-color: #{$ibexa-color-info-600}; @@ -77,6 +78,11 @@ transform: none; .ids-icon { + fill: $ibexa-color-dark-300; + } + + &:hover .ids-icon, + &:focus .ids-icon { fill: $ibexa-color-white; } @@ -95,10 +101,10 @@ &__input { height: calculateRem(40px); - padding: calculateRem(4px) calculateRem(56px) calculateRem(4px) calculateRem(16px); + padding: calculateRem(4px) calculateRem(56px) calculateRem(4px) calculateRem(12px); color: $ibexa-color-white; - background: color.change($ibexa-color-white, $alpha: 0.1); - border-color: transparent; + background: $ibexa-color-dark-500; + border-color: $color-neutral-210; &:not(:disabled) { &:hover { @@ -109,7 +115,7 @@ &:focus { color: $ibexa-color-white; border-color: $ibexa-color-info-600; - background: color.change($ibexa-color-white, $alpha: 0.1); + background: $ibexa-color-dark-500; box-shadow: 0 0 0 calculateRem(4px) color.change($ibexa-color-white, $alpha: 0.2); } @@ -125,7 +131,7 @@ } &::placeholder { - color: $ibexa-color-light; + color: $ibexa-color-dark-300; } } diff --git a/src/bundle/Resources/public/scss/_header-user-menu.scss b/src/bundle/Resources/public/scss/_header-user-menu.scss index c5d6680dc7..09c56307db 100644 --- a/src/bundle/Resources/public/scss/_header-user-menu.scss +++ b/src/bundle/Resources/public/scss/_header-user-menu.scss @@ -1,18 +1,21 @@ @use '@ibexa-admin-ui/src/bundle/Resources/public/scss/custom.scss' as *; @use '@ibexa-admin-ui/src/bundle/Resources/public/scss/functions/calculate.rem' as *; -@use 'sass:color'; +@use '@ibexa-admin-ui-assets/src/bundle/Resources/public/vendors/ids-assets/dist/scss/variables/colors' as *; .ibexa-header-user-menu { display: flex; justify-content: flex-end; align-items: center; - padding-left: calculateRem(16px); - border-left: calculateRem(1px) solid $ibexa-color-light; + gap: calculateRem(4px); + height: calculateRem(32px); + margin-left: calculateRem(16px); + padding-left: calculateRem(8px); + border-left: calculateRem(1px) solid $color-neutral-200; &__popup-menu { z-index: 1060; - top: calculateRem(53px); - right: calculateRem(20px); + top: calculateRem(45px); + right: calculateRem(16px); min-width: calculateRem(200px); padding: 0; @@ -37,17 +40,18 @@ &__toggler { display: flex; align-items: center; + justify-content: center; position: relative; - margin-left: calculateRem(16px); - padding: calculateRem(2px); - border-radius: calculateRem(12px); + width: calculateRem(32px); + height: calculateRem(32px); + padding: 0; + border-radius: 50%; border: 0; - background: color.change($ibexa-color-white, $alpha: 0.1); + background: transparent; .ibexa-icon { + display: none; fill: $ibexa-color-white; - margin-left: calculateRem(5px); - margin-right: calculateRem(4px); transform: rotate(0deg); transition: all $ibexa-admin-transition-duration $ibexa-admin-transition; } @@ -70,17 +74,18 @@ border-radius: 50%; .ibexa-user-thumbnail { - width: calculateRem(22px); - height: calculateRem(22px); + width: calculateRem(20px); + height: calculateRem(20px); } } &__notifications-toggler { display: flex; - align-items: flex-end; + align-items: center; + justify-content: center; position: relative; - height: calculateRem(24px); - padding-bottom: calculateRem(4px); + width: calculateRem(32px); + height: calculateRem(32px); cursor: pointer; &:hover { @@ -91,22 +96,25 @@ } &__notice-dot { - width: calculateRem(12px); - height: calculateRem(12px); + width: calculateRem(16px); + height: calculateRem(16px); border-radius: 50%; background: $ibexa-color-danger; opacity: 1; cursor: pointer; position: absolute; - left: calculateRem(8px); - top: 0; + left: calculateRem(16px); + top: calculateRem(2px); color: $ibexa-color-white; &::after { display: flex; justify-content: center; + align-items: center; + height: 100%; content: attr(data-count); - font-size: $ibexa-text-font-size-extra-small; + font-size: calculateRem(10px); + line-height: calculateRem(15px); } &--no-notice { diff --git a/src/bundle/Resources/public/scss/_main-container.scss b/src/bundle/Resources/public/scss/_main-container.scss index 013be5c926..8fe305f8b0 100644 --- a/src/bundle/Resources/public/scss/_main-container.scss +++ b/src/bundle/Resources/public/scss/_main-container.scss @@ -7,7 +7,7 @@ display: flex; flex-wrap: nowrap; overflow: hidden; - height: calc(100vh - #{calculateRem(72px)}); + height: calc(100vh - #{calculateRem(64px)}); &__content-column { display: flex; diff --git a/src/bundle/Resources/public/scss/_main-header.scss b/src/bundle/Resources/public/scss/_main-header.scss index fb8ec7c2c2..77b27c2b4f 100644 --- a/src/bundle/Resources/public/scss/_main-header.scss +++ b/src/bundle/Resources/public/scss/_main-header.scss @@ -8,9 +8,8 @@ display: flex; justify-content: space-between; gap: calculateRem(16px); - padding: calculateRem(16px) calculateRem(20px) calculateRem(15px); - background: $ibexa-color-dark; - border-bottom: calculateRem(1px) solid $ibexa-color-dark-500; + padding: calculateRem(12px) calculateRem(16px); + background: $ibexa-color-black; &:has(.modal.show) { z-index: auto; @@ -22,7 +21,7 @@ align-items: center; justify-content: center; flex: 0 0 calculateRem(64px); - margin: calculateRem(-16px) 0 calculateRem(-16px) calculateRem(-20px); + margin: calculateRem(-12px) 0 calculateRem(-12px) calculateRem(-16px); &::before { content: ''; @@ -66,7 +65,7 @@ &__brand-image { max-width: calculateRem(120px); - max-height: calculateRem(32px); + max-height: calculateRem(28px); } &__search-column { diff --git a/src/bundle/Resources/public/scss/_main-menu.scss b/src/bundle/Resources/public/scss/_main-menu.scss index 59e0a3d616..f0df055807 100644 --- a/src/bundle/Resources/public/scss/_main-menu.scss +++ b/src/bundle/Resources/public/scss/_main-menu.scss @@ -37,7 +37,7 @@ } display: flex; - height: calc(100vh - #{calculateRem(72px)}); + height: calc(100vh - #{calculateRem(64px)}); &__navbar { display: flex; diff --git a/src/bundle/Resources/public/scss/_preview.scss b/src/bundle/Resources/public/scss/_preview.scss index 5f59ad0085..12ef351a9d 100644 --- a/src/bundle/Resources/public/scss/_preview.scss +++ b/src/bundle/Resources/public/scss/_preview.scss @@ -7,7 +7,7 @@ &__iframe { iframe { width: 100%; - height: calc(100vh - calculateRem(72px)); + height: calc(100vh - calculateRem(64px)); display: block; margin: 0 auto; transition: all $ibexa-admin-transition-duration $ibexa-admin-transition; diff --git a/src/bundle/Resources/public/scss/_side-panel.scss b/src/bundle/Resources/public/scss/_side-panel.scss index 130cb273ca..fae88bac57 100644 --- a/src/bundle/Resources/public/scss/_side-panel.scss +++ b/src/bundle/Resources/public/scss/_side-panel.scss @@ -6,9 +6,9 @@ background-color: $ibexa-color-white; padding: calculateRem(8px) 0; width: calculateRem(516px); - height: calc(100vh - calculateRem(73px)); + height: calc(100vh - calculateRem(64px)); position: fixed; - top: calculateRem(73px); + top: calculateRem(64px); right: 0; z-index: 200; diff --git a/src/bundle/Resources/public/scss/_user-mode-badge.scss b/src/bundle/Resources/public/scss/_user-mode-badge.scss index a8776f9b06..f044a584a8 100644 --- a/src/bundle/Resources/public/scss/_user-mode-badge.scss +++ b/src/bundle/Resources/public/scss/_user-mode-badge.scss @@ -1,17 +1,18 @@ @use '@ibexa-admin-ui/src/bundle/Resources/public/scss/custom.scss' as *; @use '@ibexa-admin-ui/src/bundle/Resources/public/scss/functions/calculate.rem' as *; +@use '@ibexa-admin-ui-assets/src/bundle/Resources/public/vendors/ids-assets/dist/scss/variables/colors' as *; .ibexa-user-mode-badge { display: flex; - height: calculateRem(24px); - padding: calculateRem(4px) calculateRem(8px); - margin: 0 calculateRem(24px); + height: calculateRem(20px); + padding: 0 calculateRem(8px); + margin: 0 calculateRem(16px); align-items: center; - border-radius: calculateRem(16px); - border: calculateRem(0.5px) solid $ibexa-color-light-600; - background: $ibexa-color-dark; - color: $ibexa-color-light-600; - font-size: calculateRem(12px); - line-height: calculateRem(18px); + border-radius: calculateRem(12px); + border: calculateRem(1px) solid $color-neutral-210; + background: transparent; + color: $ibexa-color-dark-300; + font-size: calculateRem(10px); + line-height: calculateRem(15px); width: max-content; } From 6a6c444a6da1c9d5a5a0bdb5033081cbeb9a1db2 Mon Sep 17 00:00:00 2001 From: tischsoic Date: Tue, 18 Aug 2026 23:34:30 +0200 Subject: [PATCH 02/10] IBX-12207: Updated main menu colors to match new design Co-Authored-By: Claude --- src/bundle/Resources/public/scss/_main-menu.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/bundle/Resources/public/scss/_main-menu.scss b/src/bundle/Resources/public/scss/_main-menu.scss index f0df055807..bce63d4d14 100644 --- a/src/bundle/Resources/public/scss/_main-menu.scss +++ b/src/bundle/Resources/public/scss/_main-menu.scss @@ -43,7 +43,8 @@ display: flex; flex-direction: column; width: calculateRem(264px); - background-color: $ibexa-color-dark; + background-color: $ibexa-color-black; + border-top: calculateRem(1px) solid $color-neutral-210; overflow-y: hidden; overflow-x: hidden; transition: width $ibexa-admin-transition-duration $ibexa-admin-transition; @@ -101,7 +102,7 @@ align-items: stretch; &--secondary { - border-top: calculateRem(1px) solid $ibexa-color-dark-500; + border-top: calculateRem(1px) solid $color-neutral-210; } } @@ -209,7 +210,7 @@ &--second-level-group { margin: 0; - border-top: calculateRem(1px) solid $ibexa-color-dark-500; + border-top: calculateRem(1px) solid $color-neutral-210; margin-top: calculateRem(8px); margin-left: calculateRem(10px); padding: calculateRem(1px) 0; From 87858c810c41b79086df65b2a58896f338e79729 Mon Sep 17 00:00:00 2001 From: tischsoic Date: Wed, 19 Aug 2026 13:53:29 +0200 Subject: [PATCH 03/10] IBX-12207: Updated header bell and avatar states to match new design Co-Authored-By: Claude --- .../public/scss/_header-user-menu.scss | 36 +++++++++++++++++-- .../views/themes/admin/ui/menu/user.html.twig | 2 ++ 2 files changed, 36 insertions(+), 2 deletions(-) diff --git a/src/bundle/Resources/public/scss/_header-user-menu.scss b/src/bundle/Resources/public/scss/_header-user-menu.scss index 09c56307db..d7e58b6970 100644 --- a/src/bundle/Resources/public/scss/_header-user-menu.scss +++ b/src/bundle/Resources/public/scss/_header-user-menu.scss @@ -1,6 +1,7 @@ @use '@ibexa-admin-ui/src/bundle/Resources/public/scss/custom.scss' as *; @use '@ibexa-admin-ui/src/bundle/Resources/public/scss/functions/calculate.rem' as *; @use '@ibexa-admin-ui-assets/src/bundle/Resources/public/vendors/ids-assets/dist/scss/variables/colors' as *; +@use 'sass:color'; .ibexa-header-user-menu { display: flex; @@ -57,16 +58,34 @@ } &--expanded { + background: $ibexa-color-dark-500; + .ibexa-icon { transform: rotate(-180deg); } } &:hover { + // The avatar circle fill is baked into the SVG served by ibexa/user, out of CSS reach; + // brightness(0.85) turns the brand bg #4e24a5 into ~#421f8c vs the design's #431f8e + .ibexa-user-thumbnail { + filter: brightness(0.85); + } + .ibexa-icon { - fill: $ibexa-color-info; + fill: $color-primary-30; } } + + &:active { + background: $ibexa-color-dark-500; + } + + &:focus-visible { + outline: none; + border: calculateRem(1px) solid $color-neutral-80; + box-shadow: 0 0 0 calculateRem(4px) color.change($ibexa-color-white, $alpha: 0.25); + } } &__thumbnail-wrapper { @@ -90,9 +109,22 @@ &:hover { .ibexa-icon { - fill: $ibexa-color-info; + fill: $color-primary-30; } } + + &:active { + .ibexa-icon { + fill: $color-primary-50; + } + } + + &:focus-visible { + outline: none; + border: calculateRem(1px) solid $color-neutral-80; + border-radius: calculateRem(8px); + box-shadow: 0 0 0 calculateRem(4px) color.change($ibexa-color-white, $alpha: 0.25); + } } &__notice-dot { diff --git a/src/bundle/Resources/views/themes/admin/ui/menu/user.html.twig b/src/bundle/Resources/views/themes/admin/ui/menu/user.html.twig index 782b4094bb..541e89dd2e 100644 --- a/src/bundle/Resources/views/themes/admin/ui/menu/user.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/menu/user.html.twig @@ -8,6 +8,8 @@
From eb3b9ca9eb4ae9b12d8b0c3de6b13b039f1c2740 Mon Sep 17 00:00:00 2001 From: tischsoic Date: Wed, 19 Aug 2026 16:24:42 +0200 Subject: [PATCH 04/10] IBX-12207: Fixed header focus geometry and switched search accents to purple Co-Authored-By: Claude --- .../Resources/public/scss/_global-search.scss | 26 +++++++-------- .../public/scss/_header-user-menu.scss | 33 ++++++++++++++----- 2 files changed, 38 insertions(+), 21 deletions(-) diff --git a/src/bundle/Resources/public/scss/_global-search.scss b/src/bundle/Resources/public/scss/_global-search.scss index 9eb4d34f94..bc297665de 100644 --- a/src/bundle/Resources/public/scss/_global-search.scss +++ b/src/bundle/Resources/public/scss/_global-search.scss @@ -14,19 +14,19 @@ --ids-input-default-bg-color: #{$ibexa-color-dark-500}; --ids-input-default-border-color: #{$color-neutral-210}; --ids-input-default-text-color: #{$ibexa-color-white}; - --ids-input-hover-border-color: #{$ibexa-color-info-600}; - --ids-input-active-border-color: #{$ibexa-color-info-600}; - --ids-input-focus-border-color: #{$ibexa-color-info-600}; + --ids-input-hover-border-color: #{$color-primary-50}; + --ids-input-active-border-color: #{$color-primary-50}; + --ids-input-focus-border-color: #{$color-primary-50}; &:hover { .ids-input { - border-color: $ibexa-color-info-600; + border-color: $color-primary-50; } } &:focus-within { .ids-input-text__search-btn { - background: $ibexa-color-info-600; + background: $color-primary-50; .ids-icon { fill: $ibexa-color-white; @@ -36,7 +36,7 @@ &:has(.ibexa-global-search__input:not(:placeholder-shown)) { .ids-input-text__search-btn { - background: $ibexa-color-info-600; + background: $color-primary-50; .ids-icon { fill: $ibexa-color-white; @@ -87,14 +87,14 @@ } &:hover { - background: $ibexa-color-info-600; - box-shadow: 0 calculateRem(22px) calculateRem(24px) 0 color.change($ibexa-color-info, $alpha: 0.2); + background: $color-primary-50; + box-shadow: 0 calculateRem(22px) calculateRem(24px) 0 color.change($color-primary-50, $alpha: 0.2); } &:focus { color: $ibexa-color-white; - background: $ibexa-color-info-600; - border-color: $ibexa-color-info-600; + background: $color-primary-50; + border-color: $color-primary-50; box-shadow: 0 0 0 calculateRem(4px) color.change($ibexa-color-white, $alpha: 0.2); } } @@ -109,12 +109,12 @@ &:not(:disabled) { &:hover { box-shadow: none; - border-color: $ibexa-color-info-600; + border-color: $color-primary-50; } &:focus { color: $ibexa-color-white; - border-color: $ibexa-color-info-600; + border-color: $color-primary-50; background: $ibexa-color-dark-500; box-shadow: 0 0 0 calculateRem(4px) color.change($ibexa-color-white, $alpha: 0.2); } @@ -122,7 +122,7 @@ &:active, &:not(:placeholder-shown) { box-shadow: none; - border-color: $ibexa-color-info-600; + border-color: $color-primary-50; } } diff --git a/src/bundle/Resources/public/scss/_header-user-menu.scss b/src/bundle/Resources/public/scss/_header-user-menu.scss index d7e58b6970..ce55f40551 100644 --- a/src/bundle/Resources/public/scss/_header-user-menu.scss +++ b/src/bundle/Resources/public/scss/_header-user-menu.scss @@ -58,7 +58,9 @@ } &--expanded { - background: $ibexa-color-dark-500; + .ibexa-header-user-menu__thumbnail-wrapper { + background: $ibexa-color-dark-500; + } .ibexa-icon { transform: rotate(-180deg); @@ -78,18 +80,25 @@ } &:active { - background: $ibexa-color-dark-500; + .ibexa-header-user-menu__thumbnail-wrapper { + background: $ibexa-color-dark-500; + } } &:focus-visible { outline: none; - border: calculateRem(1px) solid $color-neutral-80; - box-shadow: 0 0 0 calculateRem(4px) color.change($ibexa-color-white, $alpha: 0.25); + + .ibexa-header-user-menu__thumbnail-wrapper { + border-color: $color-neutral-80; + box-shadow: 0 0 0 calculateRem(4px) color.change($ibexa-color-white, $alpha: 0.25); + } } } &__thumbnail-wrapper { display: flex; + padding: calculateRem(2px); + border: calculateRem(1px) solid transparent; border-radius: 50%; .ibexa-user-thumbnail { @@ -121,9 +130,17 @@ &:focus-visible { outline: none; - border: calculateRem(1px) solid $color-neutral-80; - border-radius: calculateRem(8px); - box-shadow: 0 0 0 calculateRem(4px) color.change($ibexa-color-white, $alpha: 0.25); + + // Overlay instead of a real border so the box never changes and the notice dot cannot shift + &::after { + content: ''; + position: absolute; + inset: calculateRem(4px); + border: calculateRem(1px) solid $color-neutral-80; + border-radius: calculateRem(8px); + box-shadow: 0 0 0 calculateRem(4px) color.change($ibexa-color-white, $alpha: 0.25); + pointer-events: none; + } } } @@ -135,7 +152,7 @@ opacity: 1; cursor: pointer; position: absolute; - left: calculateRem(16px); + left: calculateRem(18px); top: calculateRem(2px); color: $ibexa-color-white; From b76ad541f117111f5ac71c1762978eda6fdf4f47 Mon Sep 17 00:00:00 2001 From: tischsoic Date: Wed, 19 Aug 2026 16:54:30 +0200 Subject: [PATCH 05/10] IBX-12207: Recolored search highlight and clear button, hid menu scrollbar track Co-Authored-By: Claude --- src/bundle/Resources/public/scss/_global-search.scss | 4 ++-- src/bundle/Resources/public/scss/_main-menu.scss | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/bundle/Resources/public/scss/_global-search.scss b/src/bundle/Resources/public/scss/_global-search.scss index bc297665de..632f625bc7 100644 --- a/src/bundle/Resources/public/scss/_global-search.scss +++ b/src/bundle/Resources/public/scss/_global-search.scss @@ -58,7 +58,7 @@ &:hover { .ids-icon { - fill: $ibexa-color-info; + fill: $color-primary-30; } } @@ -175,7 +175,7 @@ &::before { content: ''; - background-color: $ibexa-color-info-200; + background-color: $color-primary-10; width: calc(100% + #{calculateRem(4px)}); height: 100%; display: block; diff --git a/src/bundle/Resources/public/scss/_main-menu.scss b/src/bundle/Resources/public/scss/_main-menu.scss index bce63d4d14..7e6c2d6929 100644 --- a/src/bundle/Resources/public/scss/_main-menu.scss +++ b/src/bundle/Resources/public/scss/_main-menu.scss @@ -14,7 +14,7 @@ overflow: hidden; } - @mixin thin-scrollbar($track: $color-neutral-230, $thumb: $color-neutral-200) { + @mixin thin-scrollbar($track: $color-neutral-240, $thumb: $color-neutral-200) { &::-webkit-scrollbar { width: calculateRem(16px); background-color: $track; From ebf3b44300631919f19145875c0476cc81ac37d9 Mon Sep 17 00:00:00 2001 From: tischsoic Date: Wed, 19 Aug 2026 13:36:18 +0200 Subject: [PATCH 06/10] IBX-12207: Used design system dark input mode in the header search Co-Authored-By: Claude --- .../Resources/public/scss/_global-search.scss | 50 +++---------------- 1 file changed, 8 insertions(+), 42 deletions(-) diff --git a/src/bundle/Resources/public/scss/_global-search.scss b/src/bundle/Resources/public/scss/_global-search.scss index 632f625bc7..7cd981b87c 100644 --- a/src/bundle/Resources/public/scss/_global-search.scss +++ b/src/bundle/Resources/public/scss/_global-search.scss @@ -7,21 +7,16 @@ width: 100%; max-width: calculateRem(500px); position: relative; + --ids-mode: dark; --ibexa-input-text-color: #{$ibexa-color-white}; --ibexa-text-color: #{$ibexa-color-white}; .ids-input-text { - --ids-input-default-bg-color: #{$ibexa-color-dark-500}; - --ids-input-default-border-color: #{$color-neutral-210}; - --ids-input-default-text-color: #{$ibexa-color-white}; - --ids-input-hover-border-color: #{$color-primary-50}; - --ids-input-active-border-color: #{$color-primary-50}; - --ids-input-focus-border-color: #{$color-primary-50}; - - &:hover { - .ids-input { - border-color: $color-primary-50; - } + // Header-specific accent; must sit on the element itself to beat the DS dark re-points there + .ids-input { + --ids-input-hover-border-color: #{$color-primary-50}; + --ids-input-active-border-color: #{$color-primary-50}; + --ids-input-focus-border-color: #{$color-primary-50}; } &:focus-within { @@ -102,37 +97,6 @@ &__input { height: calculateRem(40px); padding: calculateRem(4px) calculateRem(56px) calculateRem(4px) calculateRem(12px); - color: $ibexa-color-white; - background: $ibexa-color-dark-500; - border-color: $color-neutral-210; - - &:not(:disabled) { - &:hover { - box-shadow: none; - border-color: $color-primary-50; - } - - &:focus { - color: $ibexa-color-white; - border-color: $color-primary-50; - background: $ibexa-color-dark-500; - box-shadow: 0 0 0 calculateRem(4px) color.change($ibexa-color-white, $alpha: 0.2); - } - - &:active, - &:not(:placeholder-shown) { - box-shadow: none; - border-color: $color-primary-50; - } - } - - &.form-control:focus { - color: $ibexa-color-light; - } - - &::placeholder { - color: $ibexa-color-dark-300; - } } &__autocomplete-no-results { @@ -274,6 +238,8 @@ &__autocomplete { position: absolute; + // White floating surface inside the dark-scoped search — must re-assert light for DS components inside + --ids-mode: light; background-color: $ibexa-color-white; padding: calculateRem(8px); width: 100%; From ad654c7b6cb4f9bf0e09a70fa0c54952c7686f48 Mon Sep 17 00:00:00 2001 From: tischsoic Date: Thu, 20 Aug 2026 08:44:11 +0200 Subject: [PATCH 07/10] IBX-12207: Removed explanatory comments from the header styles Co-Authored-By: Claude Opus 5 (1M context) --- src/bundle/Resources/public/scss/_global-search.scss | 2 -- src/bundle/Resources/public/scss/_header-user-menu.scss | 3 --- 2 files changed, 5 deletions(-) diff --git a/src/bundle/Resources/public/scss/_global-search.scss b/src/bundle/Resources/public/scss/_global-search.scss index 7cd981b87c..5154370714 100644 --- a/src/bundle/Resources/public/scss/_global-search.scss +++ b/src/bundle/Resources/public/scss/_global-search.scss @@ -12,7 +12,6 @@ --ibexa-text-color: #{$ibexa-color-white}; .ids-input-text { - // Header-specific accent; must sit on the element itself to beat the DS dark re-points there .ids-input { --ids-input-hover-border-color: #{$color-primary-50}; --ids-input-active-border-color: #{$color-primary-50}; @@ -238,7 +237,6 @@ &__autocomplete { position: absolute; - // White floating surface inside the dark-scoped search — must re-assert light for DS components inside --ids-mode: light; background-color: $ibexa-color-white; padding: calculateRem(8px); diff --git a/src/bundle/Resources/public/scss/_header-user-menu.scss b/src/bundle/Resources/public/scss/_header-user-menu.scss index ce55f40551..c12ae45fe3 100644 --- a/src/bundle/Resources/public/scss/_header-user-menu.scss +++ b/src/bundle/Resources/public/scss/_header-user-menu.scss @@ -68,8 +68,6 @@ } &:hover { - // The avatar circle fill is baked into the SVG served by ibexa/user, out of CSS reach; - // brightness(0.85) turns the brand bg #4e24a5 into ~#421f8c vs the design's #431f8e .ibexa-user-thumbnail { filter: brightness(0.85); } @@ -131,7 +129,6 @@ &:focus-visible { outline: none; - // Overlay instead of a real border so the box never changes and the notice dot cannot shift &::after { content: ''; position: absolute; From 3114369021eaab5ab22bd04b25d1b98163622a6e Mon Sep 17 00:00:00 2001 From: tischsoic Date: Thu, 20 Aug 2026 09:30:02 +0200 Subject: [PATCH 08/10] IBX-12207: Updated user menu popup to match the design Co-Authored-By: Claude --- .../public/scss/_header-user-menu.scss | 111 +++++++++++++++++- .../Resources/translations/messages.en.xliff | 5 - .../views/themes/admin/ui/menu/user.html.twig | 33 ++++-- src/lib/Menu/UserMenuBuilder.php | 3 + 4 files changed, 134 insertions(+), 18 deletions(-) diff --git a/src/bundle/Resources/public/scss/_header-user-menu.scss b/src/bundle/Resources/public/scss/_header-user-menu.scss index c12ae45fe3..f63027d8c2 100644 --- a/src/bundle/Resources/public/scss/_header-user-menu.scss +++ b/src/bundle/Resources/public/scss/_header-user-menu.scss @@ -17,25 +17,126 @@ z-index: 1060; top: calculateRem(45px); right: calculateRem(16px); - min-width: calculateRem(200px); + width: calculateRem(243px); padding: 0; + gap: 0; + border-color: $color-neutral-70; + border-radius: calculateRem(12px); + box-shadow: calculateRem(4px) calculateRem(32px) calculateRem(47px) 0 color.change($ibexa-color-info, $alpha: 0.1); ul { + display: flex; + flex-direction: column; + gap: calculateRem(8px); margin-bottom: 0; padding: calculateRem(8px); } + + .ibexa-popup-menu__item { + padding: 0; + + &--with-border { + margin-top: calculateRem(8px); + padding-top: calculateRem(8px); + border-top: 0; + position: relative; + + // The design insets the divider 8px from the card's inner edges + &::before { + content: ''; + position: absolute; + top: 0; + left: calculateRem(8px); + right: calculateRem(8px); + border-top: calculateRem(1px) solid $color-neutral-70; + } + } + } + + .ibexa-popup-menu__item-content { + align-items: center; + gap: calculateRem(8px); + padding: calculateRem(8px) calculateRem(4px) calculateRem(8px) calculateRem(12px); + border-radius: calculateRem(8px); + color: $ibexa-color-black; + + &:hover { + background-color: transparent; + color: $ibexa-color-primary; + + .ibexa-icon { + fill: $ibexa-color-primary; + } + } + + &:active { + color: $color-primary-90; + + .ibexa-icon { + fill: $color-primary-90; + } + } + + &:focus-visible { + outline: none; + box-shadow: 0 0 0 calculateRem(4px) color.change($ibexa-color-primary, $alpha: 0.25); + } + } + } + + &__item-icon { + flex-shrink: 0; + fill: $ibexa-color-black; } &__popup-menu-title { - padding: calculateRem(16px) calculateRem(24px); - border-bottom: calculateRem(1px) solid $ibexa-color-light; - color: $ibexa-color-dark-400; + padding: calculateRem(16px); + border-bottom: calculateRem(1px) solid $color-neutral-70; + } + + &__user { + display: flex; + align-items: center; + gap: calculateRem(5px); + } + + &__user-thumbnail { + display: flex; + flex-shrink: 0; + + .ibexa-user-thumbnail { + width: calculateRem(40px); + height: calculateRem(40px); + } + } + + &__user-details { + display: flex; + flex-direction: column; + min-width: 0; + } + + &__user-name, + &__user-email { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + &__user-name { + color: $ibexa-color-primary; + font-size: $ibexa-text-font-size-medium; + } + + &__user-email { + color: $color-neutral-150; font-size: $ibexa-text-font-size-small; } .ibexa-focus-mode-form { color: $ibexa-color-dark; - margin-top: calculateRem(12px); + padding: calculateRem(8px) calculateRem(12px); + margin: calculateRem(8px) calculateRem(8px) 0; } &__toggler { diff --git a/src/bundle/Resources/translations/messages.en.xliff b/src/bundle/Resources/translations/messages.en.xliff index 9db925d9ea..1aa3dbb190 100644 --- a/src/bundle/Resources/translations/messages.en.xliff +++ b/src/bundle/Resources/translations/messages.en.xliff @@ -671,11 +671,6 @@ Are you sure you want to delete selected URL wildcard(s)? key: url_wildcard.modal.message - - Logged as %userName% - Logged as %userName% - key: user_menu.popup_menu.title - diff --git a/src/bundle/Resources/views/themes/admin/ui/menu/user.html.twig b/src/bundle/Resources/views/themes/admin/ui/menu/user.html.twig index 541e89dd2e..d06827aad7 100644 --- a/src/bundle/Resources/views/themes/admin/ui/menu/user.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/menu/user.html.twig @@ -33,16 +33,26 @@
{% block current_user %} - {{ 'user_menu.popup_menu.title'|trans({'%userName%': user.name})|desc('Logged as %userName%') }} - {% endblock %} - - {% block focus_mode_toggle %} - {{ render(controller('Ibexa\\Bundle\\AdminUi\\Controller\\User\\FocusModeController::changeAction', { - returnPath: app.request.attributes.get('semanticPathinfo') - })) }} +
+
+ {% include '@ibexadesign/ui/component/user_thumbnail/user_thumbnail.html.twig' with { + user: user, + } %} +
+
+ {{ user.name }} + {{ user.email }} +
+
{% endblock %}
+ {% block focus_mode_toggle %} + {{ render(controller('Ibexa\\Bundle\\AdminUi\\Controller\\User\\FocusModeController::changeAction', { + returnPath: app.request.attributes.get('semanticPathinfo') + })) }} + {% endblock %} + {{ parent() }}
@@ -67,5 +77,12 @@ {% block linkElement %} {% import _self as knp_menu %} - {{ block('label') }} + + {% if item.getExtra('icon') is not null %} + + + + {% endif %} + {{ block('label') }} + {% endblock %} diff --git a/src/lib/Menu/UserMenuBuilder.php b/src/lib/Menu/UserMenuBuilder.php index dbddb0b11d..1ea979d5c1 100644 --- a/src/lib/Menu/UserMenuBuilder.php +++ b/src/lib/Menu/UserMenuBuilder.php @@ -70,6 +70,7 @@ public function createStructure(array $options): ItemInterface ], 'extras' => [ 'orderNumber' => 40, + 'icon' => 'user-profile', ], ] ) @@ -81,6 +82,7 @@ public function createStructure(array $options): ItemInterface 'route' => 'ibexa.user_settings.list', 'extras' => [ 'orderNumber' => 50, + 'icon' => 'settings', ], ]) ); @@ -93,6 +95,7 @@ public function createStructure(array $options): ItemInterface ], 'extras' => [ 'orderNumber' => 60, + 'icon' => 'log-out', ], ]) ); From ac98a3254a1df0ace679051659bd9f0d4171e00f Mon Sep 17 00:00:00 2001 From: tischsoic Date: Thu, 20 Aug 2026 11:33:55 +0200 Subject: [PATCH 09/10] IBX-12207: Kept the notification count above the bell focus ring Co-Authored-By: Claude --- src/bundle/Resources/public/scss/_header-user-menu.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/bundle/Resources/public/scss/_header-user-menu.scss b/src/bundle/Resources/public/scss/_header-user-menu.scss index f63027d8c2..d9aa79626e 100644 --- a/src/bundle/Resources/public/scss/_header-user-menu.scss +++ b/src/bundle/Resources/public/scss/_header-user-menu.scss @@ -250,6 +250,8 @@ opacity: 1; cursor: pointer; position: absolute; + // Keeps the count above the toggler's focus-ring overlay, which paints after it + z-index: 1; left: calculateRem(18px); top: calculateRem(2px); color: $ibexa-color-white; From 6b7fcbbf104c162ebecb22a9609d634423669080 Mon Sep 17 00:00:00 2001 From: tischsoic Date: Thu, 20 Aug 2026 12:36:31 +0200 Subject: [PATCH 10/10] IBX-12207: Removed an explanatory comment from the user menu styles Co-Authored-By: Claude --- src/bundle/Resources/public/scss/_header-user-menu.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/bundle/Resources/public/scss/_header-user-menu.scss b/src/bundle/Resources/public/scss/_header-user-menu.scss index d9aa79626e..648a4a7148 100644 --- a/src/bundle/Resources/public/scss/_header-user-menu.scss +++ b/src/bundle/Resources/public/scss/_header-user-menu.scss @@ -41,7 +41,6 @@ border-top: 0; position: relative; - // The design insets the divider 8px from the card's inner edges &::before { content: ''; position: absolute;