Merge pull request #32204 from nextcloud/fix/invert-logo

This commit is contained in:
John Molakvoæ 2022-04-28 19:30:59 +02:00 committed by GitHub
commit 350d0261ea
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 19 additions and 17 deletions

View file

@ -52,6 +52,6 @@
--header-menu-item-height: 44px;
--header-menu-profile-item-height: 66px;
--breakpoint-mobile: 1024px;
--primary-invert-if-bright: unset;
--background-invert-if-dark: unset;
--primary-invert-if-bright: no;
--background-invert-if-dark: no;
}

View file

@ -89,6 +89,8 @@ class DefaultTheme implements ITheme {
$colorBoxShadow = $this->util->darken($colorMainBackground, 70);
$colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorBoxShadow));
$hasCustomLogoHeader = $this->imageManager->hasImage('logo') || $this->imageManager->hasImage('logoheader');
$variables = [
'--color-main-background' => $colorMainBackground,
'--color-main-background-rgb' => $colorMainBackgroundRGB,
@ -175,8 +177,11 @@ class DefaultTheme implements ITheme {
// to be used for legacy reasons only. Use inline
// svg with proper css variable instead or material
// design icons.
'--primary-invert-if-bright' => $this->util->invertTextColor($this->primaryColor) ? 'invert(100%)' : 'unset',
'--background-invert-if-dark' => 'unset',
// ⚠️ Using 'no' as a value to make sure we specify an
// invalid one with no fallback. 'unset' could here fallback to some
// other theme with media queries
'--primary-invert-if-bright' => $this->util->invertTextColor($this->primaryColor) ? 'invert(100%)' : 'no',
'--background-invert-if-dark' => 'no',
];
// Register image variables only if custom-defined
@ -185,7 +190,7 @@ class DefaultTheme implements ITheme {
if ($this->imageManager->hasImage($image)) {
// If primary as background has been request, let's not define the background image
if ($image === 'background' && $backgroundDeleted) {
$variables["--image-background-plain"] = true;
$variables["--image-background-plain"] = 'true';
continue;
} else if ($image === 'background') {
$variables['--image-background-size'] = 'cover';
@ -194,6 +199,10 @@ class DefaultTheme implements ITheme {
}
}
if ($hasCustomLogoHeader) {
$variables["--image-logoheader-custom"] = 'true';
}
return $variables;
}

View file

@ -182,12 +182,8 @@
left: 12px;
top: 1px;
bottom: 1px;
img {
opacity: 0;
max-width: 100%;
max-height: 200px;
}
// Invert non-custom logo if primary is too bright
filter: var(--image-logoheader-custom, var(--primary-invert-if-bright))
}
.header-appname-container {
@ -450,11 +446,6 @@ nav[role='navigation'] {
// Make sure most app names dont ellipsize
letter-spacing: -0.5px;
font-size: 12px;
// If the primary is too bright, invert the app icons
svg image {
filter: var(--primary-invert-if-bright);
}
}
/* focused app visual feedback */
@ -512,6 +503,8 @@ nav[role='navigation'] {
svg,
.icon-more-white {
transition: transform var(--animation-quick) ease;
// If the primary is too bright, invert the app icons
filter: var(--primary-invert-if-bright);
}
/* Triangle */

View file

@ -109,7 +109,7 @@ $getUserAvatar = static function (int $size) use ($_): string {
<?php if (isset($entry['target']) && $entry['target']): ?> target="_blank" rel="noreferrer noopener"<?php endif; ?>
<?php if ($entry['active']): ?> class="active"<?php endif; ?>
aria-label="<?php p($entry['name']); ?>">
<svg width="20" height="20" viewBox="0 0 20 20" alt=""<?php if ($entry['unread'] !== 0) { ?> class="has-unread"<?php } ?>>
<svg width="20" height="20" viewBox="0 0 16 16" alt=""<?php if ($entry['unread'] !== 0) { ?> class="has-unread"<?php } ?>>
<defs>
<filter id="invertMenuMore-<?php p($entry['id']); ?>"><feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"></feColorMatrix></filter>
<mask id="hole">