Issue title: Design update
 Issue body: ## Tasks

- [ ] Server
  - [ ] PoC to check for potential blockers regarding scroll behaviour https://github.com/nextcloud/server/pull/33568
    - [x] overflow on body
    - [x] Spacing on sides and bottom on mobile (potentially also on smaller screen, or make it smaller with an in-between breakpoint)
    - [x] Set the background image on all page https://github.com/nextcloud/nextcloud-vue/pull/3091
    - [x] Set background image on header
    - [x] See if we want to make them opt-in (e.g. for not using them on dashboard or not yet compatible community apps)
  - [x] Core styling requirements https://github.com/nextcloud/server/pull/33610
    - [x] New css variable for transparent background color + blur filter 
    - [x] Copy image to core/img/ to cover disabled dashboard
  - [ ] Background image options
    - [ ] https://github.com/nextcloud/server/pull/33733
    - [ ] Add accessibility menu in the header bar - top right
  - [ ] Fallback for not ported apps not needed as we announce it as breaking add
  - [ ] https://github.com/nextcloud/server/issues/33735
    - [ ] Figure out a way to regenerate avatars
    - [ ] New style based on lighter color pallete
    - [ ] What about contacts which uses the same color palette iirc?
  - [ ] Current app indicator
    - [ ] Decided to switch to a small bar isntead of the arrow
- [ ] Vue components
  - [ ] Container layout 
  - [ ] Smaller topics
    - [x] Counter bubble https://github.com/nextcloud/nextcloud-vue/issues/3054
    - [x] Show app nav actions menu only for active/hover/focus: https://github.com/nextcloud/nextcloud-vue/issues/3048
    - [x] https://github.com/nextcloud/nextcloud-vue/pull/3056
  - [ ] Container layout https://github.com/nextcloud/nextcloud-vue/pull/3091
    - [ ] Content
    - [ ] AppNavigation
	  - [x] Nav semi-transparent: https://github.com/nextcloud/nextcloud-vue/issues/3047
      - [x] Pill-rounded nav entries: https://github.com/nextcloud/nextcloud-vue/issues/3049
    - [ ] AppContentList
      - [x] https://github.com/nextcloud/nextcloud-vue/pull/3055
      - [x] Bold first line (sender in Mail, contact name in Contacts, conversation name in Talk) – but keep it normal in single-line navigation like Files, Photos etc.
    - [ ] AppContent
      - [ ] Scroll container should be within the AppContent
    - [ ] AppSidebar
      - [ ] Sidebar should span full height if rendered besides a modal/viewer (e.g. in talk like it is with files already)
- [ ] Apps to upgrade components + testing + bug fixing
  - [ ] Hub
    - [ ] Files
    - [ ] Settings
    - [ ] Activity
    - [ ] Photos
  - [ ] Groupware
    - [ ] Calendar
    - [ ] Contacts
    - [ ] Mail
  - [ ] Office
    - [ ] Deck
  - [ ] Talk
  - [ ] Other
    - [ ] Collectives
- [ ] Special care for
  - [ ] Performance of blur effect
  - [ ] Sidebar collapsing on large screens
  - [ ] Sidebar collapsing on mobile
  - [ ] check Js interaction on scroll containers
  - [ ] Scroll bars should not cause a container content size change (e.g. https://caniuse.com/?search=overlay https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter)

### Potential follow up ideas

Out of scope for now as discussed

- [ ] Dynamic colors https://m3.material.io/theme-builder#/dynamic

<details>
 <summary>Screenshots</summary>
![1366-768-max](https://user-images.githubusercontent.com/3404133/184995908-98a33c67-66e5-4dfa-b64c-8978431b4043.png)
</details>
 Comments: 
 Comment 0: > * Add direct link to "Appearance & accessibility" to user menu in the header bar - top right

Do we have the space for this there? Thinking about mobile compatibility...
 Comment 1: - [ ] BUG: https://github.com/nextcloud/server/issues/33925
 Comment 2: - [ ] Accessibility BUG: color-text-maxcontrast needs to use darker value in new left navigation https://github.com/nextcloud/nextcloud-vue/issues/3198
{'source': 'GithubIssues', 'repo_name_with_owner': 'nextcloud/server', 'issue_id': 1354581129, 'repo_stars': 21840.0}