Dark mode adjustments for popover

Add new popover classes from @nextcloud/vue's Popover and PopoverMenu* components. This fixes issues where the menu icons were not inverted. Adjusted border for both the avatar popover menu and also actions popover menu to make them easier to distinguish from the background. Now using border color for the popover arrow to make it more visible outside the border. Signed-off-by: Vincent Petry <[email protected]>
nextcloud · Jan 20, 2021 · 6e2c652 · 6e2c652
1 parent 2c9345a
commit 6e2c652
Showing 1 changed file with 19 additions and 2 deletions.
diff --git a/apps/accessibility/css/dark.scss b/apps/accessibility/css/dark.scss
@@ -53,11 +53,12 @@ $color-border-dark: lighten($color-main-background, 14%);
 
 .bubble,
 .app-navigation-entry-menu,
-.popovermenu {
+.popovermenu,
+.popover__menu {
 	li {
 		> button,
 		> a,
-		> .menuitem {
+		> .menuitem, > .popover__menuitem {
 			> img {
 				filter: invert(100%);
 			}
@@ -71,6 +72,22 @@ $color-border-dark: lighten($color-main-background, 14%);
 	border: 1px solid var(--color-border);
 }
 
+.popover[x-placement^='top'] .popover__arrow {
+	border-top-color: var(--color-border);
+}
+.popover[x-placement^='bottom'] .popover__arrow {
+	border-bottom-color: var(--color-border);
+}
+.popover[x-placement^='left'] .popover__arrow {
+	border-left-color: var(--color-border);
+}
+.popover[x-placement^='right'] .popover__arrow {
+	border-right-color: var(--color-border);
+}
+.popover .popover__inner {
+	border: 1px solid var(--color-border);
+}
+
 // Prevent slideshow icons from going dark
 #slideshow {
 	[class^='icon-'], [class*=' icon-']{