Merge pull request #33610 from nextcloud/enh/background-blur-vars

apps/dashboard/src/DashboardApp.vue

@@ -170,8 +170,9 @@ export default {
  || this.background.match(/#[0-9A-Fa-f]{6}/g)) {
  return null
  }
+
  return {
- backgroundImage: `url(${this.backgroundImage})`,
+ backgroundImage: this.background === 'default' ? 'var(--image-main-background)' : `url(${this.backgroundImage})`,
  }
  },
 
@@ -426,8 +427,6 @@ export default {
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: var(--color-primary);
- --color-background-translucent: rgba(var(--color-main-background-rgb), 0.8);
- --background-blur: blur(10px);
 
  > h2 {
  color: var(--color-primary-text);
@@ -453,9 +452,9 @@ export default {
  width: 320px;
  max-width: 100%;
  margin: 16px;
- background-color: var(--color-background-translucent);
- -webkit-backdrop-filter: var(--background-blur);
- backdrop-filter: var(--background-blur);
+ background-color: var(--color-main-background-blur);
+ -webkit-backdrop-filter: var(--filter-background-blur);
+ backdrop-filter: var(--filter-background-blur);
  border-radius: var(--border-radius-large);
 
  #body-user.theme--highcontrast & {
@@ -556,9 +555,9 @@ export default {
 .edit-panels,
 .statuses ::v-deep .action-item .action-item__menutoggle,
 .statuses ::v-deep .action-item.action-item--open .action-item__menutoggle {
- background-color: var(--color-background-translucent);
- -webkit-backdrop-filter: var(--background-blur);
- backdrop-filter: var(--background-blur);
+ background-color: var(--color-main-background-blur);
+ -webkit-backdrop-filter: var(--filter-background-blur);
+ backdrop-filter: var(--filter-background-blur);
  opacity: 1 !important;
 
  &:hover,

apps/theming/css/default.css

@@ -2,6 +2,8 @@
  --color-main-background: #ffffff;
  --color-main-background-rgb: 255,255,255;
  --color-main-background-translucent: rgba(var(--color-main-background-rgb), .97);
+ --color-main-background-blur: rgba(var(--color-main-background-rgb), .8);
+ --filter-background-blur: blur(25px);
  --gradient-main-background: var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%;
  --color-background-hover: #f5f5f5;
  --color-background-dark: #ededed;
@@ -59,4 +61,5 @@
  --primary-invert-if-bright: no;
  --background-invert-if-dark: no;
  --background-invert-if-bright: invert(100%);
+ --image-main-background: url('/core/img/app-background.jpg');
 }

apps/theming/lib/Themes/DefaultTheme.php

@@ -97,6 +97,8 @@ public function getCSSVariables(): array {
  '--color-main-background' => $colorMainBackground,
  '--color-main-background-rgb' => $colorMainBackgroundRGB,
  '--color-main-background-translucent' => 'rgba(var(--color-main-background-rgb), .97)',
+ '--color-main-background-blur' => 'rgba(var(--color-main-background-rgb), .8)',
+ '--filter-background-blur' => 'blur(25px)',
 
  // to use like this: background-image: linear-gradient(0, var('--gradient-main-background));
  '--gradient-main-background' => 'var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%',
@@ -190,26 +192,30 @@ public function getCSSVariables(): array {
  '--primary-invert-if-bright' => $this->util->invertTextColor($this->primaryColor) ? 'invert(100%)' : 'no',
  '--background-invert-if-dark' => 'no',
  '--background-invert-if-bright' => 'invert(100%)',
+
+ '--image-main-background' => "url('" . $this->urlGenerator->imagePath('core', 'app-background.jpg') . "')",
  ];
 
  $backgroundDeleted = $this->config->getAppValue('theming', 'backgroundMime', '') === 'backgroundColor';
  // If primary as background has been request or if we have a custom primary colour
  // let's not define the background image
  if ($backgroundDeleted || $hasCustomPrimaryColour) {
  $variables["--image-background-plain"] = 'true';
- } 
+ }
 
  // Register image variables only if custom-defined
  foreach(['logo', 'logoheader', 'favicon', 'background'] as $image) {
  if ($this->imageManager->hasImage($image)) {
+ $imageUrl = $this->imageManager->getImageUrl($image);
  if ($image === 'background') {
  // If background deleted is set, ignoring variable
  if ($backgroundDeleted) {
  continue;
- } 
+ }
  $variables['--image-background-size'] = 'cover';
+ $variables['--image-main-background'] = "url('" . $imageUrl . "')";
  }
- $variables["--image-$image"] = "url('".$this->imageManager->getImageUrl($image)."')";
+ $variables["--image-$image"] = "url('" . $imageUrl . "')";
  }
  }
 

apps/theming/lib/Themes/HighContrastTheme.php

@@ -59,6 +59,9 @@ public function getCSSVariables(): array {
  $variables['--color-background-dark'] = $this->util->darken($colorMainBackground, 30);
  $variables['--color-background-darker'] = $this->util->darken($colorMainBackground, 30);
 
+ $variables['--color-main-background-blur'] = $colorMainBackground;
+ $variables['--filter-background-blur'] = 'none';
+
  $variables['--color-placeholder-light'] = $this->util->darken($colorMainBackground, 30);
  $variables['--color-placeholder-dark'] = $this->util->darken($colorMainBackground, 45);
 

apps/theming/tests/Themes/DefaultThemeTest.php

@@ -75,6 +75,13 @@ protected function setUp(): void {
  return vsprintf($text, $parameters);
  });
 
+ $this->urlGenerator
+ ->expects($this->any())
+ ->method('imagePath')
+ ->willReturnCallback(function ($app = 'core', $filename = '') {
+ return "/$app/img/$filename";
+ });
+
  $this->defaultTheme = new DefaultTheme(
  $util,
  $this->themingDefaults,