mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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 <vincent@nextcloud.com>
This commit is contained in:
Vincent Petry 2021-01-20 11:32:26 +01:00
parent 2c9345a3c6
commit 6e2c6525da
No known key found for this signature in database
GPG Key ID: E055D6A4D513575C
1 changed files with 19 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
apps/accessibility/css/dark.scss
View File

@ -53,11 +53,12 @@ $color-border-dark: lighten($color-main-background, 14%);
.bubble, .bubble,
.app-navigation-entry-menu, .app-navigation-entry-menu,
.popovermenu { .popovermenu,
.popover__menu {
li { li {
> button, > button,
> a, > a,
> .menuitem { > .menuitem, > .popover__menuitem {
> img { > img {
filter: invert(100%); filter: invert(100%);
} }
@ -71,6 +72,22 @@ $color-border-dark: lighten($color-main-background, 14%);
border: 1px solid var(--color-border); 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 // Prevent slideshow icons from going dark
#slideshow { #slideshow {
[class^='icon-'], [class*=' icon-']{ [class^='icon-'], [class*=' icon-']{