diff --git a/src/Umbraco.Web.UI.Client/src/apps/backoffice/components/backoffice-header-sections.element.ts b/src/Umbraco.Web.UI.Client/src/apps/backoffice/components/backoffice-header-sections.element.ts index 57ef1ba2db..a704b0a227 100644 --- a/src/Umbraco.Web.UI.Client/src/apps/backoffice/components/backoffice-header-sections.element.ts +++ b/src/Umbraco.Web.UI.Client/src/apps/backoffice/components/backoffice-header-sections.element.ts @@ -72,64 +72,30 @@ export class UmbBackofficeHeaderSectionsElement extends UmbLitElement { ?active="${this._currentSectionAlias === section.alias}" href="${`section/${section.manifest?.meta.pathname}`}" label="${section.manifest?.meta.label ?? section.manifest?.name ?? ''}"> - ` + `, )} - ${this._renderExtraSections()} `; } - private _renderExtraSections() { - return when( - this._extraSections.length > 0, - () => html` - - - - - - - - - - ` - ); - } - render() { return html` ${this._renderSections()} `; } static styles: CSSResultGroup = [ css` + :host { + display: contents; + } #tabs { - color: var(--uui-color-header-contrast); height: 60px; + flex-basis: 100%; font-size: 16px; --uui-tab-text: var(--uui-color-header-contrast); --uui-tab-text-hover: var(--uui-color-header-contrast-emphasis); --uui-tab-text-active: var(--uui-color-header-contrast-emphasis); - --uui-tab-background: var(--uui-color-header-background); - } - - #dropdown { - background-color: white; - border-radius: var(--uui-border-radius); - width: 100%; - height: 100%; - box-sizing: border-box; - box-shadow: var(--uui-shadow-depth-3); - min-width: 200px; - color: black; /* Change to variable */ + background-color: var(--uui-color-header-background); + --uui-tab-group-dropdown-background: var(--uui-color-header-surface); } `, ];