Skip to content

🥛 Make app navigation semi-transparent #3047

@ChristophWurst

Description

@ChristophWurst

As per the mockups

Bildschirmfoto vom 2022-08-16 12-58-35

the app navigation component should become semi-transparent and let the background image show through with a blur.

Specification

  • 80% opaque white with 10px blur, like in Dashboard. Code: background-color: var(--color-background-translucent); -webkit-backdrop-filter: var(--background-blur); backdrop-filter: var(--background-blur);
  • AppNavigationNew gets our Nextcloud fade, looks nice and clicky
  • WCAG AA: Contrast of secondary text in the navigation works after darkening it to 5c5c5c
  • WCAG AAA: Just like for Dashboard, the high contrast theme should make the navigation background fully opaque and the secondary text color also color-main-text.

Metadata

Metadata

Assignees

Labels

2. developingWork in progressaccessibilityMaking sure we design for the widest range of people possible, including those who have disabilitiesdesignDesign, UX, interface and interaction designenhancementNew feature or requestfeature: app-navigationRelated to the app-navigation component

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions