fix(AppMenu): On bright color theme the app icons in the overflow menu must be inverted

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>

diff --git a/core/src/components/AppMenu.vue b/core/src/components/AppMenu.vue
index ed3a6293c578a6297306099e5f86c09200d932ca..c4ea41ecc8498ccc6761dc0e50c211b3fea300d7 100644 (file)
--- a/core/src/components/AppMenu.vue
+++ b/core/src/components/AppMenu.vue
@@ -247,14 +247,18 @@ $header-icon-size: 20px;
 }
 
 ::v-deep .app-menu-more .button-vue--vue-tertiary {
-       color: var(--color-primary-text);
        opacity: .7;
        margin: 3px;
        filter: var(--background-image-invert-if-bright);
 
-       &:hover {
-               opacity: 1;
-               background-color: transparent !important;
+       /* Remove all background and align text color if not expanded */
+       &:not([aria-expanded="true"]) {
+               color: var(--color-primary-text);
+
+               &:hover {
+                       opacity: 1;
+                       background-color: transparent !important;
+               }
        }
 
        &:focus-visible {
@@ -267,6 +271,8 @@ $header-icon-size: 20px;
        .app-icon {
                position: relative;
                height: 44px;
+               /* Icons are bright so invert them if bright color theme == bright background is used */
+               filter: var(--background-invert-if-bright);
 
                &.has-unread::after {
                        background-color: var(--color-main-text);